this.$nextTick( 回调函数 )的作用

首先要明确几个概念

1.Vue的核心思想

数据驱动 和 组件化系统

2.同步和异步

在没有特殊情下，程序一般先执行同步代码，等待同步执行完之后，执行异步代码

下面进入正题，首先贴出程序片段：

　　

在该段代码执行时，数据驱动发生，由于数据驱动页面的变化有先后之分，先执行数据的更新，在进行页面的渲染更新。前者是同步操作，后者是异步操作，而接下来的this.$nextTick()，他是等到页面渲染之后，才调用该函数，所以顺理成章，执行过程如下： 数据更新（同步） =》 页面更新（异步） =》this.$nextTick() （等到页面更新完毕之后）

来一个对比：

　　如果没有的话，如图所示：

　　

　　这个时候会报错：

　　

　　显示 后面的$refs前面的是undefined  现在的执行顺序是： 数据更新（同步） =》 this.$refs.saveTagInput.$refs.input.focus()  (同步， 查到对应的dom元素节点，如果找到的话，继续执行)  =》  页面更新 （异步）

　　显然是执行不了的，因为在页面更新之前，还没有渲染页面，他找不到对应  this.$refs.saveTagInput 的dom节点，所以报错显示 undefined

　　需要特别注意 的是 this.$nextTick()  的执行时机  即：等到页面更新完毕之后执行