理解下 nextTick 的作用和幾個簡單的使用場景

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。

我想各位都知道或了解 Vue 的渲染流程，Vue 在監(jiān)聽到數(shù)據(jù)變化后會重新渲染，配合 VDOM 更新真實(shí)的 DOM，而 nextTick 的觸發(fā)時機(jī)就是在調(diào)用方法后的第一次重新渲染完畢后。

有兩種使用方法，一種是傳入回調(diào)，另一種是 Promise，官方使用示例如下：

// 修改數(shù)據(jù)vm.msg = ’Hello’// DOM 還沒有更新Vue.nextTick(function () { // DOM 更新了})// 作為一個 Promise 使用 (2.1.0 起新增，詳見接下來的提示)Vue.nextTick() .then(function () { // DOM 更新了 })

如果在 SPA（單文件組件） 中，可能是這個樣子

<template> <div id='test'>{{msg}}</div></template><script>export default { name: ’app’, data() { return { 'msg': 'Hello World!' } }, method() { this.msg = 'Hi World!'; this.$nextTick(() => { console.log(’DOM updated:’, document.getElementById(’test’).innerHTML) }); }}</script>有什么使用場景？

需要等待渲染完成后執(zhí)行的一些方法

比如在 created 和 mounted 回調(diào)中，需要操作渲染好的 DOM，則需要在 nextTick 中執(zhí)行相關(guān)邏輯，這在必須使用一些老的需要綁定 DOM 的庫時很有用。

比如，在加載 UEditor 時，可能會這樣玩

<template><script name='content' type='text/plain'> 這里寫你的初始化內(nèi)容 </script></template><script>export default { mounted() { this.nextTick(() => { var ue = UE.getEditor(’container’); }); }}獲取元素寬度

在 Vue 中獲取元素寬度有兩種方式，第一種是通過 $refs[ref名稱].style.width，第二種可以使用傳統(tǒng)操作 DOM 的方式獲取，但這兩者要獲取到準(zhǔn)確的元素寬度，則需要在 DOM 渲染完畢后執(zhí)行。

<template><p ref='myWidth' v-if='showMe'>{{ message }}</p> <button @click='getMyWidth'>獲取p元素寬度</button></template><script>export default { data() { return { message: 'Hello world!', showMe: false, }, methods: { getMyWidth() { this.showMe = true; //this.message = this.refs.myWidth.offsetWidth; //報(bào)錯 TypeError: this.refs.myWidth is undefined this.nextTick(()=>{ //dom元素更新后執(zhí)行，此時能拿到p元素的屬性 this.message = this.refs.myWidth.offsetWidth; }) } } }}</script>總結(jié)

雖說 Vue 的設(shè)計(jì)理念并不建議我們?nèi)ブ苯硬僮?DOM，但有些場景下出現(xiàn)了特別令人迷惑的問題，理解 Vue 的渲染邏輯后，使用 nextTick() 可以解決。

以上就是如何使用Vue中的nextTick的詳細(xì)內(nèi)容，更多關(guān)于使用vue中的nextTick的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！