正文
在vue中操作DOM--this.$nextTick()
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。比如一个新闻滚动的列表项。如果在这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后。
一、新闻滚动列表
1、在created函数中获取后台数据；
2、模板引擎中用v-for生成列表项；
3、调用滚动函数，假设该滚动函数式原生方法写的；
4、什么时候开始调用滚动函数比较合适呢？
二、this.$nextTick()
官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: 'not updated'
}
},
methods: {
updateMessage: function () {
this.message = 'updated'
console.log(this.$el.textContent) // => 'not updated'
this.$nextTick(function () {
console.log(this.$el.textContent) // => 'updated'
})
}
}
})
三、新闻滚动列表中的this.$nextTick()放哪里？
因为数据是根据请求之后获取的，所以应该放到请求的回调函数里面。
四、原理【重点】
前面只是利用一个例子引入话题。
在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，为什么获取不到 DOM呢？
原因：
这里就涉及到 Vue 一个很重要的概念：异步更新队列（JS运行机制 、 事件循环）。
Vue 在观察到数据变化时并不是直接更新 DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。
在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。
然后，在下一个事件循环 tick 中，Vue 刷新队列并执行实际（已去重的）工作。
所以如果用 for 循环来动态改变数据100次，其实它只会应用最后一次改变，如果没有这种机制，DOM就要重绘100次，是一个很大的开销，损耗性能。
例子：
//改变数据
vm.message = 'changed'//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'//这样可以，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
console.log(vm.$el.textContent) //可以得到'changed'
})
五、常见应用
点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。
showsou(){
this.showit = true //修改 v-show
document.getElementById("keywords").focus() //在第一个 tick 里，获取不到输入框，自然也获取不到焦点
}//修改
showsou(){
this.showit = true
this.$nextTick(function () {
// DOM 更新了
document.getElementById("keywords").focus()
})
}
