vue指令與$nextTick操作DOM有什么區(qū)別-創(chuàng)新互聯(lián)
小編給大家分享一下vue指令與$nextTick操作DOM有什么區(qū)別，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)公司10多年
企業(yè)網(wǎng)站制作服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),
企業(yè)網(wǎng)站制作及推廣,對(duì)
效果圖設(shè)計(jì)等多個(gè)行業(yè)擁有多年的網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。
異步更新隊(duì)列
可能你還沒(méi)有注意到，Vue 異步執(zhí)行 DOM 更新。只要觀(guān)察到數(shù)據(jù)變化，Vue 將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作上非常重要。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。Vue 在內(nèi)部嘗試對(duì)異步隊(duì)列使用原生的 Promise.then 和 MessageChannel，如果執(zhí)行環(huán)境不支持，會(huì)采用 setTimeout(fn, 0) 代替。
例如，當(dāng)你設(shè)置 vm.someData = 'new value' ，該組件不會(huì)立即重新渲染。當(dāng)刷新隊(duì)列時(shí)，組件會(huì)在事件循環(huán)隊(duì)列清空時(shí)的下一個(gè)“tick”更新。多數(shù)情況我們不需要關(guān)心這個(gè)過(guò)程，但是如果你想在 DOM 狀態(tài)更新后做點(diǎn)什么，這就可能會(huì)有些棘手。雖然 Vue.js 通常鼓勵(lì)開(kāi)發(fā)人員沿著“數(shù)據(jù)驅(qū)動(dòng)”的方式思考，避免直接接觸 DOM，但是有時(shí)我們確實(shí)要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用。例如：
{{message}}
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
在組件內(nèi)使用 vm.$nextTick() 實(shí)例方法特別方便，因?yàn)樗恍枰?Vue ，并且回調(diào)函數(shù)中的 this 將自動(dòng)綁定到當(dāng)前的 Vue 實(shí)例上：
Vue.component('example', {
template: '{{ message }}',
data: function () {
return {
message: '沒(méi)有更新'
}
},
methods: {
updateMessage: function () {
this.message = '更新完成'
console.log(this.$el.textContent) // => '沒(méi)有更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '更新完成'
})
}
}
})vue指令
鉤子函數(shù)
一個(gè)指令定義對(duì)象可以提供如下幾個(gè)鉤子函數(shù) (均為可選)：
bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。
update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
鉤子函數(shù)的參數(shù) (即 el、binding、vnode 和 oldVnode)。
需要注意的是：update時(shí)dom可能還沒(méi)有插入文檔，componentUpdated是DOM已經(jīng)插入文檔。并且所謂的“更新”這個(gè)鉤子函數(shù)的觸發(fā)條件非常寬泛，不容易把控。比如，其他與該節(jié)點(diǎn)無(wú)關(guān)的相鄰節(jié)點(diǎn)更新，引發(fā)其布局的重流，也會(huì)導(dǎo)致該鉤子函數(shù)觸發(fā)
因此，如果想要在數(shù)據(jù)更新后，操作DOM，使用指令的update, componentUpdated 需要謹(jǐn)慎，可以考慮使用nextTick
以上是“vue指令與$nextTick操作DOM有什么區(qū)別”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前文章：vue指令與$nextTick操作DOM有什么區(qū)別-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：
http://weahome.cn/article/dgjhij.html
重慶分公司
重慶分公司
