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

作者：管理员 2018-10-15 10:38:10 分类：Vue2.js专栏阅读（13187） 0

nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。比如你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中

官方定义

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

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

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(9) 打赏

标签：

上一篇：深入了解line-height文字垂直居中

下一篇：Visual Studio Code自定义html5模板

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

官方定义

相关推荐

共 0 条评论关于"VUE中Vue.nextTick()和this.$nextTick()"

点击取消