前提
vue更新数据是异步的
1.0 中确实是通过 v-el:xxx 标记 dom 然后在组件里通过 this.$els.xxx 就可以获得这个 dom 对象了
$nextTick(() => {}) 与DOM相关操作写在该函数回调中,确保DOM已渲染
Vue.nextTick()文档解释
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
所以就衍生出了这个
获取更新后的DOM
的Vue方法。所以放在Vue.nextTick()
回调函数中的执行的应该是会对DOM进行操作的 js代码
Vue.nextTick()应用场景
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。使用时机:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子函数,此时页面并未全部渲染。
在某个动作有可能改变DOM元素结构的时候,对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中
栗子
<div id="app">
<p ref="myWidth" v-if="showMe">{{ message }}</p>
<button @click="getMyWidth">获取p元素宽度</button>
</div>
new Vue({
el: "#app",
data: {
message: 'Hello Vue.js',
showMe: false
},
methods: {
getMyWidth() {
this.showMe = true;
//this.message = this.$refs.myWidth.offsetWidth;//报错 TypeError: this.$refs.myWidth is undefined
this.$nextTick(()=>{
//dom元素更新后执行,此时能拿到p元素的属性
this.message = this.$refs.myWidth.offsetWidth;
})
}
}
})