Day07-生命週期

13th鐵人賽

hsiu753

團隊寫 code 需要講幹話

2021-09-23 18:17:05

852 瀏覽

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

狀態更新與畫面同步

scrollHeight和realScrollHeight起始值是一樣的，但在更新內容之後會變得不等高，這是因為更新時採非同步執行，偵測到資料更新時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');