vue2和vue3响应式原理

vue2响应式原理


Vue2 响应式原理是通过 Object.defineProperty 这个 API 来实现的。 Vue2 响应式的基本原理:

  1. 数据劫持:在 Vue 初始化时,Vue 会遍历 data 中的所有属性,并使用 Object.defineProperty 把这些属性转化为 getter 和 setter。
  2. Getter:在 getter 中,Vue会收集对数据的依赖。当一个属性被读取时,会触发 getter,然后把对应的依赖 (Watcher) 添加到依赖列表中。
  3. Setter:在 setter 中,Vue会监听到属性的变化。当一个属性被赋新值时,会触发 setter,然后通知依赖列表中的 Watcher 执行更新。
  4. 依赖收集和触发更新:Watcher 这个机制用来收集依赖和触发更新。每个组件实例都会对应一个 Watcher 对象,用来管理该组件所依赖的属性。当一个组件中的数据被访问时,会触发对应的 getter,然后把该组件的 Watcher 添加到依赖列表中。当某个依赖的数据发生变化时,会触发对应的 setter,然后通知依赖列表中的所有 Watcher 执行更新操作。
  5. 通过这种方式,Vue实现了响应式的数据绑定。当数据发生变化时,相关的组件会自动更新,并且更新只发生在需要更新的组件上,提高了性能。

总结,Vue2 对象的响应式并不是递归的。只有在初始化时存在的属性才会被转换为响应式属性,新添加的属性或删除的属性不会被响应式监听。如果需要对动态添加的属性进行响应式处理,则可以使用 Vue.set 或 this.$set 方法来实现。
 

vue3响应式原理


Vue 3响应式原理相较于Vue2有较大的改进。Vue 3使用了Proxy对象来实现响应式数据的双向绑定。Vue3的响应式原理实现方式:

  1. 在Vue3中,使用reactive函数来创建一个响应式的数据对象。这个函数接收一个普通的JavaScript对象,并将其转化为Proxy对象。Proxy对象允许我们在访问和修改对象属性时拦截并执行自定义的操作。
  2. 当我们访问响应式数据对象的属性时,Proxy对象会拦截这个操作,并建立一个依赖关系,将这个属性和正在访问它的地方关联起来。
  3. 当我们修改响应式数据对象的属性时,Proxy对象同样会拦截这个操作,并通知所有依赖于这个属性的地方进行更新。
  4. 为了更高效地进行依赖追踪,Vue 3使用了一个称为“依赖收集”的技术。在访问响应式数据对象的属性时,Vue3会将正在访问这个属性的地方收集起来,并建立一个依赖关系图。当属性发生变化时,Vue3会根据这个依赖关系图,只更新那些真正依赖于这个属性的地方。
  5. 与Vue2相比,Vue3的响应式系统更加灵活和高效。它能够在初始化时追踪到动态添加的属性,并且能够进行深层次的依赖追踪,而不仅限于对象的顶层属性。

总结,Vue3通过使用Proxy对象和依赖收集技术,实现了更高效、更灵活的响应式数据双向绑定机制。这种改进使得Vue3在性能和开发体验上都有了显著的提升。

你可能感兴趣的:(vue.js)