关于Vue.nextTick()一些基础知识。

1.Vue.nextTick和Vue.$nextTick()区别

1，nextTick方法 vm.nextTick(callback)：当数据发生变化，更新后执行回调 在下次dom更新循环结束之后执行延迟回调，在修改数据之后立即执行这个方法，获取更新后的dom 2，$nextTick()回调函数：当dom发生变化，更新后执行的回调，将回调延迟到下次dom更新循环后执行。$nextTick()是回调的this自动绑定到调用它的实例上，所以用的更多 $nextTick(()=>{}) 与DOM相关操作写在该函数回调中，确保DOM已渲染后才执行里面的回调函数。

2.### 什么是Vue.$nextTick()

1---官方解释：在下次dom更新循环结束之后执行延迟回调。在修改数据之后使用这个方法。获取更新后的dom元素。所以就衍生出这个获取更新后的dom的vue方法，

2---使用场景

openChoose(e){
     this.$nextTick(()=>{
     this.$refs.choosePackage.init(this.accountholder.id,student.id)
     })
}

this.$nextTick():作用，通过点击父组件的某一个元素，调用了openChoosePackage这个方法；而这个方法将在子组件调用的时候调用自身的init()方法，并且父组件还传递了两个参数过去。

init(): 子组件中methods里面的一个方法
this.$refs.choosePackage：这是一个通过refs关联的子组件

子组件中：

init(accountholderId,studentId){
     this.accountholderId = accountholderId;  //父组件在调用init方法时传入的
     this.studentId = studentId     
}
init(): 子组件中并没有哪一个事件中调用了init这个方法，但它会在子组件调用的时候执行，因为父组件通过this.$nextTick()和refs调用了这个方法

注意：父子组件调用情况下的生命周期钩子函数和vm.$nextTick的执行顺序问题： 1-父子组件都是单独的vue组件，都有各自的data,created，等属性和方法。只是他们存在调用的问题。 2-子组件虽然在父组件刚调用时不会被立即调用，但其实已经被渲染了。执行没有被显示出来。 3-父子组件的mounted执行顺序：在父组件被调用时，父子组件的mounted都将被调用。 执行顺序：父组件mounted > 子组件的mounted

3## Vue.nextTick(callback) 使用原理：

原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。 当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用