Weibert小崴少の世界: 使用Vue.js加入回到頂端按鈕的教學, 在Blogger也適用~

如果有人想要學習jQuery的寫法，可以參考我之前的文章!

會想要改用Vue來寫，主要是因為jQuery體積龐大，

明明只有用到一些功能，卻要載入全部的jQuery相對耗時，

此外，前端框架御三家Angular、React、Vue是各公司要找前端工程師時，會要求的技能，因此若能學會其中一個，對自己也是有相當幫助的!

本文是以Vue來實作返回頂部的按鈕，並運用在Blogger上，

若想運用在自己網站上也都是可以的!

💚1. 匯入Vue，我是使用3.3.0版本的，vue2和vue3的語法會有些不同~

<head>
<!--Start:插入Vue.js-->
    <script src='https://unpkg.com/vue@3.3.0/dist/vue.global.js'/>
<!--End:插入Vue.js
</head>

💚2. 設置你的button，<div id, <button class, v-on:click, v-show 等等都要記得打上去

<div id='scroll_app'>
    <button class='scroll_btn' v-on:click='scrollToTop' v-show='showButton'>^</button>
</div>

💚3. 打入你的返回頂端語法，

一開始data()先把showButton訂為false，因為剛進網頁通常已在頂端，

再來使用mounted()來當鉤子執行，當滾動位置超過100時，就將showButton訂為true來顯示按鈕。

在元件被掛載到 DOM 後（即 mounted() 鉤子執行時），window.addEventListener('scroll', this.handleScroll) 會在 scroll 事件上註冊一個名為 handleScroll 的監聽器。這意味著只要該元件處於活動狀態，即使滾動事件頻繁發生，該監聽器也會持續監聽滾動事件。

當元件被銷毀時（例如在 destroyed() 鉤子中），使用 window.removeEventListener('scroll', this.handleScroll) 來移除對應的滾動事件監聽器。這樣可以確保在元件被銷毀後不再監聽滾動事件，防止記憶體洩漏和不必要的效能消耗。

因此，只要註冊了事件監聽器並且沒有被移除，它就會持續監聽指定的事件。

如果事件監聽器未被銷毀，可能會導致一些潛在的問題：

a. 記憶體洩漏：未移除的事件監聽器會持續存在於記憶體中，如果監聽器數量龐大或存在時間過長，可能會造成記憶體洩漏，佔用大量記憶體資源。

b. 效能問題：持續監聽事件可能會對效能造成影響，尤其是如果事件處理函數（例如捲動事件、滑鼠移動事件等）非常頻繁且處理邏輯複雜，會導致不必要的效能損耗。

c. 意外行為：如果監聽器在不需要的情況下仍然存在，可能會引發意外行為。例如，在元件被銷毀後，如果事件監聽器仍然存在，處理事件的函數可能會嘗試操作已經被銷毀的 DOM 元素，導致錯誤或異常行為。

因此，雖然不移除事件監聽器可能在某些情況下暫時沒有直接的問題，但長期來看可能會導致記憶體洩漏、效能問題或意外的不可預測行為。最佳實踐是在不再需要監聽事件時，應該明確地使用 removeEventListener 來移除事件監聽器，以保持程式碼的健全性和可維護性。

👄

destroyed() 是 Vue 實例生命周期鉤子（Lifecycle Hook）之一，它在 Vue 實例被完全銷毀（destroyed）後被調用。

this.$destroy() 是手動銷毀 Vue 實例的方法。當你呼叫 this.$destroy() 時，Vue 實例將會被立即銷毀，進而觸發 Vue 實例的銷毀過程，包括執行相關的生命周期鉤子，如 beforeDestroy() 和 destroyed()。

在你的程式碼中，當觸發 scrollToTop() 方法時，你呼叫了 this.$destroy()，這將會立即銷毀 Vue 實例，並導致它的生命周期中的相關鉤子(destroyed())被調用。

>>手動呼叫this.$destroy()摧毀vue實例後，會執行鉤子destroyed()，而本例有在destroyed()中加入removeEventListener的程式，以此來刪除監聽器。

<script>
const scroll = {
    data() {
        return {
            showButton: false
        };
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll);
    },
    destroyed() {
        window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        handleScroll() {
            this.showButton = window.scrollY > 100; // 當滾動位置超過100像素時顯示按鈕
        },
        scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth' // 平滑滾動至頂部
            });
            this.$destroy() // 呼叫destroyed，把監聽給remove掉
        }
    }
}
Vue.createApp(scroll).mount(scroll_app) 
</script>

💚4. 設定你的外觀style，裡面比較重要的是position:fixed;，

因為你需要按鈕固定在右下角，所以要打right:30px;bottom:30px;，

代表從下面往上30px；從右往上左30px，就會是按鈕所在的位置了

<崴少設計出的成品>//<

<style>
    .scroll_btn{
        z-index:10;
        position:fixed;
        right:30px;
        bottom:30px;
        width:88px;
        font-size: 30px;
        height:60px;
        border-radius:50%;
        transition:all 0.3s;
        cursor: pointer;
        background-color: #efc1f1;
        border: 2px dashed #ed3939;
        color:#000000;
        text-align: center;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
        }
        
    .scroll_btn:hover{
        width:86px;
        height:58px;
        font-size: 30px;
        height:60px;
        border-radius:50%;
        background:#FFB5B5;
        }
</style>

Weibert小崴少の世界

崴貓的連結

2023年12月7日星期四

使用Vue.js加入回到頂端按鈕的教學, 在Blogger也適用~

沒有留言:

張貼留言

崴貓的連結

2023年12月7日 星期四

使用Vue.js加入回到頂端按鈕的教學, 在Blogger也適用~

沒有留言:

張貼留言

2023年12月7日星期四