Vue.nextTick进阶分析

最新推荐文章于 2024-12-23 20:58:11 发布

高桥靓仔

最新推荐文章于 2024-12-23 20:58:11 发布

阅读量262

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_45221036/article/details/108432103

本文深入探讨Vue.nextTick的原理，它在数据变化与DOM更新之间的角色。对比React的setState，指出Vue响应式的即时性与React setState的异步特性，并说明两者回调函数如何在视图更新后获取最新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)// 你好李银河
}