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:
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!