iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

我的Vue學習筆記系列 第 8

Day07-生命週期

前面幾天稍微懂Vue能做到哪些是情,今天就要來深入了解Vue的生命週期,看他怎麼從無到有來處理我們對他下的指令。

狀態更新與畫面同步

scrollHeightrealScrollHeight起始值是一樣的,但在更新內容之後會變得不等高,這是因為更新時採非同步執行,偵測到資料更新時Vue會開啟一個隊列,讓更新的資料暫時放在裡面,直到下個事件循環(tick),才會把暫放的資料渲染到實際的DOM上面。

在for迴圈中,連續更改了1000次 number 的資料,如果使用同步更新,則需要1000次更新。但用nextTick()可以在跑完迴圈後,做一次性更新,這樣可以減少資料重複更新與不必要的計算。—-Vue nextTick 處理完成後就換我!

為了要讓他資料同步,可以使用$nextTick,異步更新隊列,使updated階段中的資料全部都可以再次被渲染。

Untitled

<div class="box">
    <div v-for="item in messages">{{item}}</div>
</div>
<input type="text" v-model="msg" @keydown.enter="addToMsg">
<p>
		msg:{{messages}}<br>
    scrollHeight: {{ scrollHeight }} <br>
    DOM 實際的 scrollHeight: {{ realScrollHeight }}
</p>
const vm = Vue.createApp({
    data: function () {
        return {
            msg: '',
            messages: ['A', 'SE', 'XYZ'],
            scrollHeight: 0,
            realScrollHeight: 0
        }
    },
    methods: {
        addToMsg: function () {
            this.messages.push(this.msg)
            this.msg = ''

            const el = document.querySelector('.box');
            this.scrollHeight = el.scrollHeight;//新增內容後更新scrollHeight
            el.scrollTop = el.scrollHeight;//滾軸滾動到底部

            this.$nextTick(() => {
              const el = document.querySelector('.box');
              this.scrollHeight = el.scrollHeight;
              el.scrollTop = el.scrollHeight;
              this.realScrollHeight = el.scrollHeight;
            });
        }
    },
    mounted() {
        const el = document.querySelector('.box');
        this.realScrollHeight = el.scrollHeight;
        this.scrollHeight = el.scrollHeight;
    }
}).mount('#app');

參考資料

生命週期
https://www.daimajiaoliu.com/daima/476117bdf900403
https://ithelp.ithome.com.tw/articles/10217199
Vue.js異步更新及nextTick
https://codertw.com/程式語言/646446/
圖解Vue異步更新原理
https://segmentfault.com/a/1190000023649590
Vue nextTick 處理完成後就換我!
https://ithelp.ithome.com.tw/articles/10240669


上一篇
Day08-元件特性
下一篇
Day9-元件溝通傳遞(part1)
系列文
我的Vue學習筆記30

尚未有邦友留言

立即登入留言