vue 中的$nextTick

1: vue中响应式并不是数据发生变化之后DOM 立即变化,  而是按照一定的策略进行DOM 更新的。

$nextTick 是在下一次DOM 更新循环结束之后执行延迟回调,  在修改数据之后使用$nextTick, 则可以在个回调中获取更新后的DOM:

$nextTick  里边是在下一次是事件循环的时候执行的, 所以在下一次事件循环的时候, 内容组件已经被挂载了
 
所以就可以获取到内容:

methdos: {
  show({ methods }) {
    this.visible = true;
    console.log(this.$refs.counter)
  }
}

这个就是一个组件的对象
是个VueComponent 对象;

在Vue 的生命周期中的created 钩子函数中进行的DOM 操作一定要放在vue.$nextTick 的回调函数中

1: 在 created 的钩子函数执行的时候其实并未对进行任何渲染, 而此时进行的DOM 操作无异于是徒劳的。 所以次数一定要将js 代码放进 vue.nextTick()  h回调函数中。

2: 与之对应的是mounted  生命钩子钩子函数,  因为该钩子函数执行的时所有的挂载和渲染都已经完成.  此时
在钩子函数进行的任何DOM 操作都不会有问题。