vue的set干什么用的

Vue.js中的set方法用于更新Vue实例中的响应式数据。它允许我们在对象上设置新的属性或修改现有的属性，并确保这些属性是响应式的，即当属性发生变化时，相关的视图会更新。

具体来说，set方法主要有两个功能：

1. 添加新属性：当我们使用set方法在对象上添加新的属性时，这个新属性会被设置为响应式的。这意味着当这个属性的值发生变化时，相关的视图会自动更新。例如：

// 在Vue实例的data对象中添加name属性
this.$set(this.$data, 'name', 'Tom');

2. 修改现有属性：当我们使用set方法修改对象中已存在的属性时，同样会触发视图的更新。这在对数组或对象进行动态修改时特别实用。例如：

// 修改Vue实例的data对象中的age属性
this.$set(this.$data, 'age', 18);

需要注意的是，set方法只能用于Vue实例的根数据对象上。如果想要在嵌套的对象或数组上添加新属性，可以使用Vue.set方法或直接通过索引修改数组。例如：

// 在嵌套对象中添加新属性
Vue.set(this.$data.userInfo, 'address', 'Beijing');

// 通过索引修改数组元素
this.$set(this.$data.list, 0, 'item1');

总结：Vue.js中的set方法用于更新Vue实例中的响应式数据，并确保新增的属性或修改的属性能够触发视图的更新。它在添加新属性或者修改现有属性时非常有用。

Vue中的set方法用于向响应式对象添加响应式属性或修改现有的响应式属性。当需要在已经创建的对象上添加新的响应式属性时，可以使用set方法来实现。

具体而言，set方法会接收三个参数：目标对象、要添加的属性名以及属性的值。它的作用是将新属性添加到对象中，并使这个新属性变成响应式的，从而可以实现数据的双向绑定。当使用set方法修改对象中已有的属性值时，也会触发视图的更新。

Vue的set方法通过使用ES5的Object.defineProperty方法来实现属性的劫持。当向对象添加新的属性时，set方法会为新属性创建一个getter和setter，并在getter中实现依赖收集，以便在属性值发生改变时能够触发相应的更新。

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

import Vue from 'vue';

Vue.set(target, propertyName, value);

其中，target是要添加属性的目标对象，propertyName是要添加的属性名，而value是要设置的属性值。

需要注意的是，如果目标对象是数组，可以使用Vue的set方法来实现虽然下标索引的元素的变更也能够触发视图的更新。

Vue的set方法主要用于向已存在的对象添加一个响应式属性，可以实现动态添加属性并让其具有监听能力。当我们直接给Vue实例对象或组件的data属性添加新属性时，新属性将不具备响应式，即不会触发视图更新。但是，通过set方法添加的属性会具有响应式，当该属性的值发生变化时，视图会自动更新。

使用set方法的语法如下：

Vue.set(object, propertyName, value)

• object: 需要添加新属性的对象。
• propertyName: 新属性的名称。
• value: 新属性的值。

下面，我将从方法的实现、操作流程两个方面讲解Vue的set方法。

方法实现

Vue的set方法实现了对属性的添加和监听，包括以下关键步骤：

1. 首先，set方法会判断对象是否是一个响应式对象，如果不是，则会通过Vue的工具函数将其转换为响应式对象。
2. 接下来，set方法会判断属性是否已经存在于对象中。如果已经存在，则直接设置属性的新值。
3. 如果属性不存在于对象中，则会通过Vue的响应式系统，为属性添加getter和setter，并将其转化为响应式属性。
4. 最后，set方法会调用触发更新的函数，通知相关的依赖进行更新。

操作流程

下面，我将通过一个示例来展示Vue的set方法的操作流程。

<template>
  <div>
    <p>{{ info.name }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        name: "John",
        age: 20,
      },
    };
  },
  methods: {
    changeName() {
      this.$set(this.info, "name", "Tom");
    },
  },
};
</script>

在上面的示例中，有一个info对象，包含了name和age两个属性。在按钮的点击事件中，调用了changeName方法，通过set方法将info对象的name属性从"John"改为"Tom"。

1. 首先，初始状态下，页面上显示的是"John"。
2. 点击按钮后，调用changeName方法。
3. changeName方法中使用set方法，传入info对象、name属性和新值"Tom"。
4. set方法判断name属性已经存在于info对象中，直接设置name属性的新值为"Tom"。
5. 触发更新函数，通知相关的依赖进行更新。
6. 页面中显示的name跟随更新，变为"Tom"。