vue中的 nextTick 方法 和 refs 的理解

一、 nextTick方法

vm.nextTick(callback)：当数据发生变化，更新后执行回调。

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

vm.$nextTick(callback)：当dom发生变化，更新后执行的回调。

        ==>> 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

注意：这两个方法没有太大的不同。区别在于：vm.nextTick(callback) 是全局的方法；而 vm.$nextTick(callback) 是回调的 this 自动绑定到调用它的实例上；所以用的更多的是vm.$nextTick(callback)！

 

理解：

vue更新数据是异步的

1.0 中确实是通过 v-el:xxx 标记 dom 然后在组件里通过 this.$els.xxx 就可以获得这个 dom 对象了

 

$nextTick(() => {}) 与DOM相关操作写在该函数回调中，确保DOM已渲染后才执行里面的回调函数。

什么是Vue.nextTick()

官方文档解释如下：

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

        所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码。

 

使用场景：

父组件中：

子组件中：

 

注意：父子组件调用情况下的生命周期钩子函数和 vm.$nextTick 的执行顺序问题：

1. 父子组件都是单独的vue组件，都各自拥有data、created、mounted、activated、methods...等属性和方法，只是他们存在调用的问题。

2. 子组件虽然在父组件刚调用时不会被立即调用，但其实已经被渲染了，执行没有被显示出来

3. 父子组件的 mounted 执行顺序： 在父组件被调用时，父子组件的 mounted 都将被调用

      执行顺序： 父组件的 mounted  > 子组件的 mounted

      

4. 父组件通过 vm.$nextTick 和 refs 调用的init方法（可以是其他名字的子组件方法），将在父组件被调用（显示）的时候执行！

 

二、refs

说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）

使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取

注意：

        $refs 会受到 v-if、v-for、v-show 这些语句的影响，可能获取不到DOM元素，即undefined

        如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods

        vm.$refs 只能获取本组件之内的 ref ，其子组件的中的ref也不能获取。但可以给整个子组件设置ref属性，如下图：

        

 

打印这个子组件的ref：可以获取到子组件中的data和methods

子组件里面定义的所有data和methods：

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！