从Vue.js看nextTick机制

操作DOM
在使用vue.js的时候&＃xff0c;有时候因为一些特定的业务场景&＃xff0c;不得不去操作DOM&＃xff0c;比如这样&＃xff1a;
export default {data () {return {test: &＃39;begin&＃39;};},methods () {handleClick () {this.test &＃61; &＃39;end&＃39;;console.log(this.$refs.test.innerText);//打印“begin”
}}
}
打印的结果是begin&＃xff0c;为什么我们明明已经将test设置成了“end”&＃xff0c;获取真实DOM节点的innerText却没有得到我们预期中的“end”&＃xff0c;而是得到之前的值“begin”呢&＃xff1f;访问真实DOM节点更新后的数据
所以我们需要在修改data中的数据后访问真实的DOM节点更新后的数据&＃xff0c;只需要这样&＃xff0c;我们把文章第一个例子进行修改。
export default {data () {return {test: &＃39;begin&＃39;};},methods () {handleClick () {this.test &＃61; &＃39;end&＃39;;this.$nextTick(() &＃61;> {console.log(this.$refs.test.innerText);//打印"end"
});console.log(this.$refs.test.innerText);//打印“begin”
}}
}
使用Vue.js的global API的$nextTick方法&＃xff0c;即可在回调中获取已经更新好的DOM实例了。