学习Vue的nextTick总结

今天学习了Vue的nextTick，首先要知道当我们改动数据的时候Vue会重新解析模板再渲染，但在这里需要注意的是Vue要从头到尾读完代码才会更新DOM模板然后再进行渲染，而不是执行一行代码就更新一次，但这样也会出现一种问题，比如说写了个input输入框，但我们想要渲染完就让输入框获取到焦点，但代码是同步的，所以在Vue解析到input框再到让它获取焦点这个过程还没有读完代码，也就是说input还没有被挂载到页面上，所以这样input是获取不到焦点的，这个时候可以使用比如传统的异步类的代码定时器来解决，时间可以设置为0，等input元素挂载完之后马上执行定时器里面的获取焦点代码，这样input框就获取到焦点了，但使用定时器就算是0秒都好也是会被推入执行列表执行的，这里就会存在效率上的问题，为了能实现定时器的功能但又不想降低效率，Vue设计了一个API叫$nextTick，它的作用是等整个DOM更新完毕之后再执行，语法：this.$nexTick(function(想DOM更新完毕之后再执行的代码))，这样就可以等input挂载在页面的时候立刻获得焦点，开发中会经常使用到这个API。