VUE中Vue.nextTick()和this.$nextTick()

2018-10-15 分类：Vue.js专区作者：管理员阅读（3471）

官方文档是这样解释的

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

比如你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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'
})
}
}
}

其实这个东西就是为了更好的拿到DOM最新节点，比如你有一个基于jquery的插件，在每次视图更新之后去执行这个jq的方法，那就需要这个钩子回调，当然有人说不是有updata吗，是有这个东西，但是那是针对某个组件整体渲染进行的生命周期钩子，但如果我们并没有去切换更新组件，只是通过事件改变了某处组件中的UI，那这时候updata自然是不会执行的，而这时候就可以用到this.$nextTick了

如果你觉得还不好理解，那我再举个例子，假如说我在页面上有个input，默认是隐藏的，我想页面刷新后input展示并获取到焦点，那你获取焦点是不是前提是必须先元素显示在页面上才能去说获得焦点，但有同学了可能说，我把获取焦点放在input显示后执行不就行了吗，不是说好的代码执行都是遵行上下文执行循序的原则吗，其实在框架下有点不同，比如下面这个例子：

1
2
3
4
5
6
7

methods: {
get_focus() {
this.isInput = true;
this.isInput = false;
this.isInput = true;
}
},

你以为代码是input先页面显示，然后隐藏，然后再显示吗？那这样的话你把vue想的也太蠢了，其实是我们事件执行完成后然后一股脑一次性更新DOM，这样的话你焦点自然不能和input显示逻辑一起执行，所以你必须应该这样写：

1
2
3
4
5
6
7
8
9
10

methods: {
get_focus() {
this.isInput = true;
this.isInput = false;
this.isInput = true;
this.$nextTick(function () {
console.log(this.$el.textContent) // => 'updated'
})
}
},

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(6) 打赏