vue的set做了什么

Vue.js中的set方法是一个全局方法，用于设置响应式对象的属性值。具体来说，set方法是对Vue实例或组件对象的$data对象进行属性的设置。当使用set方法设置属性值时，Vue会自动触发视图更新，确保数据的变化能够及时地反映在用户界面上。

set方法接受三个参数：对象、属性名和属性值。通过调用set方法，可以修改对象的指定属性的值。当属性不存在时，set方法会自动将属性添加到对象中。

使用set方法的一个常见场景是使用Vue.js开发的组件中，当需要动态修改组件的属性时，可以通过set方法来实现。例如，可以通过在组件内部使用this.$set来设置组件的属性值。

具体来说，set方法是通过Vue的响应式系统来实现的。Vue在初始化过程中，会对传入的data对象进行递归遍历，将对象的属性转换为响应式属性，当属性被访问或修改时，Vue会自动追踪依赖并更新相关的视图。

在普通的JavaScript对象上使用set方法是无效的，因为只有Vue实例或组件对象的$data属性才会被Vue的响应式系统所追踪。如果需要在普通的JavaScript对象上实现类似的功能，可以使用Vue.set方法。

需要注意的是，使用set方法修改对象的属性时，应该遵循Vue的响应式规范，即在组件内部使用set方法修改属性，不要直接对对象进行赋值操作，以确保Vue能够正确地追踪属性的变化并及时更新视图。

总之，Vue.js的set方法是用于设置响应式对象属性值的全局方法，通过调用set方法可以动态地修改组件的属性，并触发相关的视图更新。它是Vue响应式系统的重要组成部分，确保数据的变化能够及时地反映在用户界面上。

Vue.js 的 set 方法用于为对象添加响应式属性。当使用 set 方法添加属性时，Vue.js 会在内部将该属性转换为响应式属性，从而实现在该属性发生变化时，相关的组件能够自动更新。

具体而言，set 方法会执行以下操作：

1. 检查对象是否是响应式数据对象。如果对象不是响应式数据对象，set 方法会直接返回，不做任何操作。

2. 检查要添加的属性是否已经存在于对象中。如果已经存在，则什么都不做；如果不存在，则执行下一步操作。

3. 检查是否处于开发环境，如果是，则在执行下一步操作之前，收集当前的依赖。

4. 将要添加的属性设置为响应式属性，即将其转换为 getter 和 setter，这个过程是通过 Object.defineProperty() 方法实现的。

5. 如果属性是一个对象，会对其进行递归地执行 observe 方法，将其转换为响应式对象。

通过使用 set 方法，我们可以将新属性添加到一个对象上，并保证这个新属性也是响应式的。这样，当这个新属性被修改时，相关的组件会相应地进行更新。这在某些场景下非常有用，特别是在动态添加属性或者从服务器获取新的数据后更新组件的情况下。

Vue的set方法是用于新增响应式属性的工具函数。在Vue中，响应式属性是在初始化时定义的，但有时需要在后续的操作中动态添加新的属性。使用set方法可以实现向已有的响应式对象中添加新的属性。

set方法的使用方式如下：

Vue.set(obj, key, value)

其中，obj是要添加属性的对象，key是要添加的属性名，value是要添加的属性值。

下面分析一下set方法的实现原理。

1. 响应式对象的实现原理

在Vue中，响应式对象的实现依赖于ES6的Proxy方法。Proxy是ES6中的新增特性，可用于定义基本操作的自定义行为。Vue利用Proxy将数据对象包装成一个代理，通过代理来拦截对于数据的访问和修改，从而实现了数据的响应式。

当访问响应式对象的属性时，Vue会通过get方法拦截该操作，并进行相应的处理。当修改响应式对象的属性时，Vue会通过set方法拦截该操作，并进行相应的处理。

2. set方法的实现原理

set方法内部的实现原理可以分为以下步骤：

2.1 判断对象是否为响应式对象

首先，set方法会调用Vue的内部方法isVue来判断对象是否为响应式对象。如果不是响应式对象，则直接终止操作。

2.2 判断属性是否存在

然后，set方法会判断要添加的属性是否已经存在于对象中。如果已经存在，则直接修改属性的值为新的值，否则，执行下一步。

2.3 判断对象是否为数组

接着，set方法会判断对象是否为数组。如果是数组，则使用数组的splice方法向指定位置添加元素，并使添加的元素变为响应式；否则，执行下一步。

2.4 添加新的属性

最后，set方法会调用Vue的内部方法defineReactive来将新属性添加到对象中。同时，给新属性设置响应式，使其可以通过Proxy进行拦截。

3. 使用示例

下面是一个使用set方法的示例：

// 创建一个响应式对象
let data = { name: 'Tom' }

// 添加新属性
Vue.set(data, 'age', 18)

console.log(data) // { name: 'Tom', age: 18 }

以上示例中，使用set方法向响应式对象data中添加了一个新的属性age。添加后的结果为{ name: 'Tom', age: 18 }。

4. 总结

set方法是Vue提供的新增响应式属性的工具函数。它内部通过判断对象是否为响应式对象、属性是否存在，以及对象是否为数组等来实现属性的添加和更新。通过set方法，可以动态地向响应式对象中添加新的属性，并保持数据的响应式特性。