Vue.js中this.$nextTick()的使用
具體描述
我的form在兩個 dialog 中，分別是添加、修改，界面上都有兩個按鈕，添加/修改、取消，如下圖所示：
界面加載之后，點擊添加，再點修改是沒問題的，就是**先點修改，會把要修改的數據加載到彈出的窗體 上，但是這個界面的值竟然被記住了！再點擊添加窗體時，this.$refs['ruleForm'].resetFields() 的執行結果，竟然是剛才的修改窗體上的內容！！！**不管怎么修改，以后this.$refs['ruleForm']. resetFields();的執行結果還是一樣的！！！ 話不多說，上解決方法：
// 添加企業聯系人 creat() { this.dialogFormVisible = true this.$nextTick(() => { this.editingContact = {} this.$refs.ruleForm.resetFields() }) }, // 修改企業聯系人 editContact(role) { this.editingContact = role this.dialogFormVisible = true this.editTitle = '修改企業聯系人' },this.$nextTick()將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的實例上。
假設我們更改了某個dom元素內部的文本，而這時候我們想直接打印出這個被改變后的文本是需要dom更新之后才會實現的，也就好比我們將打印輸出的代碼放在setTimeout(fn, 0)中；
先來第一個例子看一看
<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>
根據上面的例子可以看出，在方法里直接打印的話， 由於dom元素還沒有更新， 因此打印出來的還是未改變之前的值，而通過this.$nextTick()獲取到的值為dom更新之后的值
this.$nextTick()在頁面交互，尤其是從后台獲取數據后重新生成dom對象之后的操作有很大的優勢，這里只是簡單的例子，實際應用中更為好用~