vue-$nextTick 和 $ref

vue-$nextTick 和 $ref

1》上述代码可以看到<ul ref="ul1"> 给ul绑定了一个ref属性，在下面可以用$refs.ul1直接获取ul这个dom阶段

2》按照代码，点击一次‘添加一项’，会添加三个li标签时间戳，加上原来有的abc三个li标签，li的个数应该有六个 但是输出li的个数只有三；
点击第二次‘添加一项’，会再添加三个li标签时间戳，加上原来有的abc三个li标签，li的个数应该有九个 但是输出li的个数只有六；
这是因为 list（data）改变的时候，dom不会立刻改变，但是用于vue是异步渲染，所以在第二次点击‘添加一项的时候’，会获取到上一次点击‘添加一项时’渲染完的新增的三个时间戳，加上原来的abc 即输出6

3》我们修改代码 加入$nextTick()如上图，
最像我们最开始说的，$nextTick()会等dom都渲染完，再执行，保证获得最新的dom节点，这样点击两次‘添加一项’的结果就会符合我们的预期，如下图。

4》最后说一下，页面渲染时，会将data的修改做整合，再整体进行渲染，比如这个例子，我们一次增加了三个时间戳，我们会先把这三个时间戳进行整合，再统一进行渲染，这也间接证明了vue异步渲染的特性，因为统一进行一次渲染，所以也只会调用一次$nextTick()