Vue.nextTick进阶分析

参考资料：

Vue.nextTick 的原理和用途

我的文章一篇文章setState进阶

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，需要进行diff算法之后才能更新真实DOM，所以使用了Vue.nextTick(callback)，callback将在视图更新（即挂载真实dom）的时候被执行。

vue的响应式和react的setState

此时区别于React中的setState方法，vue的响应式改变data中的值之后就可以被立即捕获到，所以说vue响应式不是异步的；

但是React的setState方法在react合成事件中是异步的（在JS原生dom事件和setTimeout中是同步的）

<template>
    <button @click="changeNum">修改数值</button>
</template>
<script>
export default {
  data() {  return { num: 18 };  },
  methods:{
    changeNum() {
      console.log(this.num);//18
      this.num = 19;
      console.log(this.num);//19
    },
  },
};
</script>

Vue中nextTick(callback)和React中setState({data},callback)他们的callback都是差不多的。都是在回调函数callback中拿到视图更新（真实dom更新）后的状态。

//改变数据
vm.message = 'changed'

//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'

//这样可以，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
    console.log(vm.$el.textContent) //可以得到'changed'
})

state={
  message:"你好李银河"
}
changeText() {
  this.setState({
    message: "再见李银河"
  }, () => {//此回调函数会在合并state视图更新后被调用执行
    console.log(this.state.message); // 再见李银河
  });
  console.log(this.state.message)// 你好李银河
}