vue响应式原理set做了什么

Vue的响应式原理是其核心功能之一，它通过监听对象的变化并自动更新相关视图，实现了数据与视图的同步。

在Vue的响应式原理中，当我们使用Vue.set(target, key, value)或者vm.$set(target, key, value)来修改一个对象时，Vue实际上做了以下几件事情：

1. 首先，Vue会判断目标对象是否是响应式的。如果目标对象不存在响应式属性，Vue会调用observe函数将其转化为响应式对象。

2. Vue会判断目标对象是否已经存在当前属性。如果属性已经存在且其值与新值相同，则不进行任何操作。

3. 如果属性是一个数组，Vue会调用数组的变异方法（如push、pop、shift等）来修改数组，并触发依赖更新。

4. 如果属性是一个对象，Vue会为新值创建一个Observer实例，然后递归地将新值转化为响应式对象。

5. Vue会调用dep.notify()来触发依赖更新。在依赖更新的过程中，Vue会遍历所有依赖这个属性的Watcher实例，然后调用Watcher实例的更新函数来更新相关视图。

总而言之，Vue的响应式原理中的set方法主要是将目标对象的属性值进行更新，并触发相关的依赖更新，从而实现了数据的响应式更新。这样，当我们修改数据时，Vue能够自动地更新变化的部分，保证了数据与视图的同步。

在Vue的响应式原理中，set方法是起到了关键的作用。它被用于在对象或数组上添加或修改属性值时触发响应式更新。

具体而言，set方法做了以下几个主要操作：

1. 检测属性的存在：当使用Vue.set或this.$set方法添加新属性时，set方法会首先检测属性是否已经存在于对象中，如果存在则直接返回，不进行响应式更新。

2. 标记属性为响应式：如果属性不存在于对象中，则会调用defineReactive方法将属性标记为响应式。defineReactive方法通过为属性添加getter和setter来实现对属性的监听。

3. 添加响应式依赖：当属性被访问时，getter会将当前的依赖关系添加到依赖收集器中。依赖收集器保存了当前属性所依赖的所有依赖项，当属性变化时，可以通知依赖项进行更新。

4. 触发更新：当属性的值发生改变时，setter会被调用，并触发更新过程。setter会通知依赖收集器中的所有依赖项进行更新操作。

5. 递归处理：set方法会对新添加的属性进行递归的响应式处理。如果新添加的属性的值也是对象或数组，那么该值也会被设置为响应式。

总结起来，set方法在Vue的响应式原理中起到了添加属性、标记属性为响应式、添加依赖关系和触发更新等重要作用。它是实现Vue数据响应式的关键方法之一。

在Vue的响应式原理中，set方法扮演着至关重要的角色。set方法主要用于监听对响应式对象的属性进行修改操作，将修改后的值进行响应式更新。

下面将详细介绍set方法在Vue响应式原理中所做的工作。

1. 响应式对象的创建和依赖收集
   首先，set方法会检测当前属性是否存在于被观察对象中。如果存在，继续执行后面的操作；如果不存在，则将该属性添加到被观察对象中。

接下来，set方法会使用Object.defineProperty()方法为该属性创建一个getter和一个setter。getter用于在读取属性值时进行依赖收集，而setter则会在属性值改变时触发更新。

2. 依赖的通知
   当属性的值发生变化时，set方法会首先获取到该属性之前所对应的旧值。接着，使用新值与旧值进行比较，如果二者相等，则不进行任何处理。如果二者不相等，则说明属性的值发生了变化，需要触发更新。

在触发更新之前，set方法会将该属性所对应的依赖列表遍历一遍，通知每一个依赖进行更新操作。在这个过程中，可能会触发一系列的计算属性getter函数和watcher的回调函数。

3. 递归调用
   当属性的值为对象时，set方法会对新值进行递归调用。这是因为对象仍然需要进行响应式处理，以确保对象内部的属性也能够进行依赖收集和更新。

通过递归调用，可以追踪到对象内部的嵌套属性，使整个对象都能够得到响应式处理。

总结：
set方法在Vue的响应式原理中起到了关键的作用，它通过创建getter和setter来实现属性的响应式更新。当属性的值发生变化时，set方法会将该属性的依赖进行通知，以触发更新操作。同时，对于属性的嵌套对象，set方法会进行递归调用，以确保对象内部的属性也能够进行响应式处理。通过这些步骤，Vue实现了一个高效、灵活的响应式系统。