原理

vue中数据和dom渲染由于是异步的，所以要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。

this.$nextTick 作用是可以将回调延迟到下次DOM更新循环之后执行。

this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上

created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$nextTick()就会被大量使用，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。

使用场景

例子1：

点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。

showsou(){this.showit = true //修改 v-showdocument.getElementById("keywords").focus()  //在第一个 tick 里，获取不到输入框，自然也获取不到焦点
}

修改为：

showsou(){this.showit = truethis.$nextTick(function () {// DOM 更新了document.getElementById("keywords").focus()})
}

例子2：

点击获取元素宽度。

<div id="app"><p ref="myWidth" v-if="showMe">{{ message }}</p><button @click="getMyWidth">获取p元素宽度</button>
</div><script>
getMyWidth() {this.showMe = true;//this.message = this.$refs.myWidth.offsetWidth;//报错 TypeError: this.$refs.myWidth is undefinedthis.$nextTick(()=>{//dom元素更新后执行，此时能拿到p元素的属性this.message = this.$refs.myWidth.offsetWidth;})
}
</script>

例子3：

在父组件中通过引用找到子组件调用子组件的方法

在父组件中，每次打开弹层时，找到子组件，要求它去发请求获取详情

添加引用:

// 子组件
<DeptDialog:id="curId"ref="deptDialog":is-edit="isEdit"@success="hAddSuccess"/>

在编辑时：找到子组件，要求它去发请求获取详情

// 用户点了编辑hEdit(id) {// 1. 保存当前操作的部门编号this.curId = id// 2.显示弹层this.showDialog = true
// 3. 修改isEditthis.isEdit = true

+     // 获取子组件的引用
+     this.$nextTick(() => {// 调用子组件的方法this.$refs.deptDialog.methodes()})},

vue中this.$nextTick()使用解析相关推荐

Vue中的$nextTick有什么作用？
Vue中的$nextTick有什么作用? 官方定义在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM 什么意思呢? 我们可以理解成,Vue 在更新 D ...
c# mvvm模式获取当前窗口_对Vue中的MVVM原理解析和实现
首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向 ...
vue中this.$nextTick()的使用---SpringCloud Alibaba_若依微服务框架改造_ElementUI---工作笔记017
this.$nextTick(() => {this.isUpdateTable = true;; }) 可以看到在vue中我们使用,更新一些变量的时候,用了这个this.$nextTick函数 ...
Vue中的$nextTick
如果面试官问你,怎么样实现一个网站切换皮肤的方案呢? 以前想的是直接用一个配置文件配置几种状态,然后用js根据配置文件设置一下就好了. 面试官回:这只是一个大概思路的,不够具体,你能说一下具体细节吗? ...
vue 中的nextTick
在vue生命周期的created() 钩子函数进行DOM操作一定要放在vue.nextTick()的回调函数中. 因为在created() 钩子函数执行时,DOM其实并未进行任何的渲染,所以执行DOM ...
[绍棠] Vue中this.$nextTick()实现原理及使用场景学习总结
this.$nextTick()原理: Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中 ...
vue 中 this.$nextTick()说明及使用
$nextTick Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM(dom的改变是发生在nextTic ...
vue中的nextTick
vue.nextTick的官方定义是: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 实际上也就是传进来的函数延迟到dom更新后再使用,也就是延 ...
vue指令写在html中的原理,详解Vue中的MVVM原理和实现方法
对Vue中的MVVM原理解析和实现首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家 ...

vue中this.$nextTick()使用解析

原理