前面幾天稍微懂Vue能做到哪些是情,今天就要來深入了解Vue的生命週期,看他怎麼從無到有來處理我們對他下的指令。
scrollHeight
和realScrollHeight
起始值是一樣的,但在更新內容之後會變得不等高,這是因為更新時採非同步執行,偵測到資料更新時Vue會開啟一個隊列,讓更新的資料暫時放在裡面,直到下個事件循環(tick),才會把暫放的資料渲染到實際的DOM上面。
在for迴圈中,連續更改了1000次 number 的資料,如果使用同步更新,則需要1000次更新。但用nextTick()可以在跑完迴圈後,做一次性更新,這樣可以減少資料重複更新與不必要的計算。—-Vue nextTick 處理完成後就換我!
為了要讓他資料同步,可以使用$nextTick
,異步更新隊列,使updated
階段中的資料全部都可以再次被渲染。
<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