$nextTick和$forceUpdate的使用

nextTick和forceUpdate的使用

nextTick

this.$nextTick() 将回调延迟到下次DOM更新循环之后执行，在修改数据之后立即使用它，然后等待DOM更新，和全局的Vue.nextTick()一样，不同的是回调的this自动绑定到调用它的实例上

应用场景

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。因为在created()钩子函数执行的时候DOM其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题
• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中
  假如a是一个深拷贝的数据，那么就可以使用nextTick将改变的数据a重新渲染到页面

...
<div
 v-if="refreshA"
>
 {{ a }}
<div>
<button @click="refresh">refresh</button>
...
data() {
 return {
  refreshA: true
 }
}
methods: {
 refresh() {
  this.a = 'new message'
  this.reRender()
 },
 reRender() {
  this.refreshA= false
  this.$nextTick(() => {
    this.refreshA= true
  })
 }
}

forceUpdate

迫使Vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。结合vue的生命周期，调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数，不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件

应用场景

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