vue中$nextTick
和$forceUpdate
的用法
vm.$nextTick( [callback] )
this.$nextTick()
將回調延遲到下次 DOM 更新循環之後執行,在修改數據之後立即使用它,然後等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣,不同的是回調的 this 自動綁定到調用它的實例上。
應用場景:
- 在Vue生命週期的created()鉤子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中。
因爲在created()鉤子函數執行的時候DOM 其實並未進行任何渲染,而此時進行DOM操作無異於徒勞,所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted()鉤子函數,因爲該鉤子函數執行時所有的DOM掛載和渲染都已完成,此時在該鉤子函數中進行任何DOM操作都不會有問題 。 - 在數據變化後要執行的某個操作,而這個操作需要使用隨數據改變而改變的DOM結構的時候,這個操作都應該放進Vue.nextTick()的回調函數中。
<template>
<section>
<div ref="hello">
<h1>Hello World ~</h1>
</div>
<el-button type="danger" @click="get">點擊</el-button>
</section>
</template>
<script>
export default {
methods: {
get() {
}
},
mounted() {
console.log(333);
console.log(this.$refs['hello']);
this.$nextTick(() => {
console.log(444);
console.log(this.$refs['hello']);
});
},
created() {
console.log(111);
console.log(this.$refs['hello']);
this.$nextTick(() => {
console.log(222);
console.log(this.$refs['hello']);
});
}
}
</script>
可以根據打印的順序看到,在created()鉤子函數執行的時候DOM 其實並未進行任何渲染,而此時進行DOM操作並無作用,而在created()裏使用this.$nextTick()可以等待dom生成以後再來獲取dom對象。
<template>
<section>
<h1 ref="hello">{{ value }}</h1>
<el-button type="danger" @click="get">點擊</el-button>
</section>
</template>
<script>
export default {
data() {
return {
value: 'Hello World ~'
};
},
methods: {
get() {
this.value = '你好啊';
console.log(this.$refs['hello'].innerText);
this.$nextTick(() => {
console.log(this.$refs['hello'].innerText);
});
}
},
mounted() {
},
created() {
}
}
</script>
this.$nextTick()在頁面交互,尤其是從後臺獲取數據後重新生成dom對象之後的操作有很大的優勢。
this.$forceUpdate()
迫使Vue實例重新(rander)渲染虛擬DOM,注意並不是重新加載組件。結合vue的生命週期,調用$forceUpdate
後只會觸發beforeUpdate和updated這兩個鉤子函數,不會觸發其他的鉤子函數。它僅僅影響實例本身和插入插槽內容的子組件,而不是所有子組件
應用場景: 當在data裏沒有顯示的聲明一個對象的屬性,而是之後給該對象添加屬性,這種情況vue是檢測不到數據變化的,可以使用$forceUpdate()
html:
<span class="test">{{egData.value}}</span>
<el-button @click="changeData">改變</el-button>
js:
egData: {}
...
changeData () {
this.egData.value = 'oldValue'
this.$forceUpdate() // dom會更新
}
但是這種做法並不推薦,官方說如果你現在的場景需要用forceUpdate方法 ,那麼99%是你的操作有問題,如上data裏不顯示聲明對象的屬性,之後添加屬性時正確的做法時用 vm.$set()
方法,所以forceUpdate請慎用。
有一篇文章有介紹vm.$set()
的用法參考: