标签：视图 ret 语法 event ted get 原理 习惯 官方文档
最近使用vue的vm.$nextTick的用法比较多，现在整理一下它的用法。
推荐阅读：http://www.ruanyifeng.com/blog/2014/10/event-loop.html
官方文档上这么说的：将回调延迟到下次DOM渲染之后执行。在修改数据后立即使用它，然后等待DOM更新。它和全局方法Vue.nextTick一样，不同的是回调的this自动绑定在它应用的实例上
上述的话也可以这么理解，我们可以把需要在渲染DOM元素出来后的一些方法放在created生命周期中，不过需要借助vm.$nextTick() 这个回调函数中执行
或者第二个用法就是在我们更新数据后，vm.$nextTick这个函数中，等待DOM更新时使用。
其实项目中最常用的就是在组件中使用vm.$nextTick的方法，并且回调函数中的this，会自动绑定在当前的vue实例上
举例：
//官网案例
Vue.component(‘example‘, { template: ‘<span>{{ message }}</span>‘, data: function () { return { message: ‘未更新‘ } }, methods: { updateMessage() { this.message = ‘已更新‘ console.log(this.$el.textContent) // => ‘未更新‘ this.$nextTick(() => { console.log(this.$el.textContent) // => ‘已更新‘ }) } } })
上述官方给的案例，我们也可以写成如下方式：通过使用ES7中的async/await的语法完成,这样后面输出的就是已更新的值
methods: { updateMessage: async function () { this.message = ‘已更新‘ console.log(this.$el.textContent) // => ‘未更新‘ await this.$nextTick() console.log(this.$el.textContent) // => ‘已更新‘ } }
我以项目中我的编写习惯举例
<script> export default{ name:‘demo‘, data(){ return { } }, created(){ this.getAjaxData() this.$nextTick(()=>{ this.getDomEl() }) }, methods:{ getAjaxData(){ //获取后台数据 }， getDomEl(){ //需要获取DOM元素执行的函数； //或者放在mounted中执行的函数 } } } </script>
官网文档：注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted
可以深入了解一下这个响应式原理的相关内容
标签：视图 ret 语法 event ted get 原理 习惯 官方文档
原文地址：https://www.cnblogs.com/bllx/p/11888598.html
