this.$nextTick this.$forceUpdate详解

 

 

原理：
 Vue 是异步执行 DOM 更新的。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。具体来说：所有同步任务都在主线程上执行，形成一个执行栈。主线程之外，还存在一个"异步的任务队列"，当主线程任务执行完，才回去执行异步任务。执行$nextTick的时候，这是一个异步事件，异步事件是 不会立即执行的代码，会被js处理器放到一个队列里。按照队列的顺序优先级等一个个按次序执行。这个地方如果创建一个setTimeout，他也会放到队列中，也一样可以获得结果。也就是说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新 

应用场景：

1,在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。因为在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

参考链接 https://zhuanlan.zhihu.com/p/211260473

this.$forceUpdate()

迫使Vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数，不会触发其他的钩子函数。

应用场景：

1。因为数据层次太多，render函数没有自动更新，需手动强制刷新。

2。当在data里没有显示的声明一个对象的属性，而是之后给该对象添加属性，这种情况vue是检测不到数据变化的，可以使用$forceUpdate()