Vue-----this.$nextTick()
Vue-----this.$nextTick()
$nextTick
Vue.nextTick()是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM(dom的改变是发生在nextTick()之后)
这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来
Vue.nextTick()作用:在下次dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获得更新后的dom
在以下两个情况下需要用到Vue.nextTick()
1.Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
2.在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
例如vue的插件BScroll滚动轴插件
<div class="menu-wrapper" ref="menuwrapper"> <ul> <li v-for="itemgood in goods" class="menu-item"> <div class="goodsli"> <span class="text"> <span v-show="itemgood.type > 0" class="icon" :class="classmap[itemgood.type]"></span>{{itemgood.name}} </span> </div> </li> </ul> </div> export default{ created(){ axios.get('../static/data.json').then((response) =>{ this.goods = response.data.goods; this.$nextTick(() => { this._initScroll(); }) }) }, methods:{ _initScroll(){ this.menuScroll = new BScroll(this.$refs.menuwrapper,{}); } } }
显示弹窗重置表单,重置必须放到nextTick中,否则找不到menuForm
showDialog(){ this.dialogVisible = true this.$nextTick(() => { this.$refs.menuForm.resetFields() }) }
青春承载希望,奋斗成就未来