Vue.set() 怎么使用

Vue.set()方法用于向响应式对象中添加属性，并确保新添加的属性是响应式的。使用Vue.set()的语法如下：

Vue.set(object, key, value)

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

例如，在Vue组件中使用Vue.set()来添加属性的示例代码如下：

<template>
  <div>
    <input type="text" v-model="obj.a" />
    <input type="text" v-model="obj.b" />
    <input type="text" v-model="obj.c" />
    <hr />
    <button @click="fn">点击出现3</button>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  data() {
    return {
      obj: {
        a: 1,
        b: 2,
      },
    };
  },
  methods: {
    fn() {
      Vue.set(this.obj, "c", 3);
    },
  },
};
</script>

在上述示例中，通过点击按钮，调用fn方法来使用Vue.set()向obj对象中添加属性c，并将其值设置为3。这样，obj对象中的属性c就会成为响应式的，即当c的值发生变化时，Vue会自动更新相关的视图。

希望这个回答对您有所帮助！\[1\]\[2\]\[4\]
#### 引用[.reference_title]
- *1* *2* *3* [Vue中Vue.set和this.$set的使用](https://blog.csdn.net/qq_59076775/article/details/122423504)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]