Vue响应式数据原理及Vue.set与Vue.$set的区别

vue是当前前端领域流行的一款开发框架，其所以能够通过数据修改来触发视图更新的一个核心机制就是响应式数据。本文将深入探讨vue响应式数据的原理，并探究vue.set与vue.$set之间的区别。

一、Vue响应式数据原理

Vue首先会对数据源进行劫持，定义数据源只要满足以下三个条件：对象非空、对象不为Frozen或Sealed的对象、对象不是Vue实例本身。当所需的对象符合条件后，Vue会为该对象加上一个Observe实例，Observe实例会为该对象每个属性添加一个Dep实例，而属性值为对象时，该属性的Dep实例会为它的每个值再添加Dep实例。从而实现了对属性的绑定。

在修改Vue实例中的数据时，Vue会通过getter和setter来拦截数据的读写操作，从而触发属性值的更新，setter操作会通知该属性所属的Dep实例进行通知更新，进而触发视图更新。这就是Vue实现响应式数据的原理。

二、Vue.set与Vue.$set的区别

立即学习“前端免费学习笔记（深入）”；

魔乐社区

天翼云和华为联合打造的AI开发者社区，支持AI模型评测训练、全流程开发应用

102

查看详情

在Vue中，我们经常会修改data中的数据，并通过v-model绑定到视图中，这样在修改数据时，Vue就可以自动的更新视图。但在修改对象数据时，我们需要借助Vue提供的Vue.set或Vue.$set方法，从而实现响应式数据的更新。

Vue.set和Vue.$set的用法是一致的。Vue.set(target, key, value)的target是想要修改的对象，key是对象作为一个属性名称，value是属性值。在使用Vue.set时，Vue会在该对象上添加一个新属性，该属性名为key，属性值为value。

Vue.$set(target, key, value)也是用来修改对象的属性值，但Vue.$set与Vue.set的区别在于，Vue.$set会判断该对象是否是响应式的，如果不是响应式的，Vue.$set会将该对象转化为响应式的对象。这样就能够确保该对象能够正常触发视图更新。

需要注意的是，当我们修改对象数据时，如果直接使用obj.property = value的方式来修改，Vue并不会检测到这个数据的变化，不会触发视图更新。因此，在修改对象类型的数据时，请确保使用Vue.set或Vue.$set方法来实现。

以上就是Vue响应式数据原理及Vue.set与Vue.$set的区别的详细内容，更多请关注php中文网其它相关文章！