Vue中使用this.$set()如何新增数据,更新视图

Vue.js是一个流行的JavaScript框架，通过MVVM模式实现数据的双向绑定和DOM的自动更新。在Vue中使用this.$set()方法可以新增数据并且更新视图。

this.$set()的用法

Vue.js中，使用this.$set()方法，可以动态添加一个属性，触发视图的重新渲染。

this.$set(obj, key, value)方法接受3个参数：

• obj：需要添加属性的对象
• key：新属性的名称
• value：新属性的值

下面是一个使用this.$set()方法新增属性的示例：

// template
<template>
  <div>{{ user.name }}</div>
</template>

// script
export default {
  data() {
    return {
      user: {
        id: 1
      }
    }
  },
  mounted() {
    // 使用$set方法给user新增name字段
    this.$set(this.user, 'name', 'John')
  }
}

在上面的示例中，使用this.$set()方法在mounted钩子函数中给user对象新增了一个name属性，并将其值设置为"John"。

需要注意的是，在Vue.js的双向绑定中，只有初始数据中已经存在的属性才会被Vue.js所“监听”，所以新增的属性如果不使用this.$set()方法添加是不会触发Vue.js自动更新视图的。

下面是另一个示例，演示如何在Vue.js中动态添加数组元素，自动触发视图更新：

// template
<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

// script
export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange']
    }
  },
  mounted() {
    // 使用$set方法向items数组中添加一个新元素
    this.$set(this.items, this.items.length, 'pear')
  }
}

在这个示例中，使用this.$set()方法向items数组中添加了一个新元素"pear"，并且Vue.js会自动更新视图。

总之，在Vue.js中使用this.$set()方法可以轻松实现数据的动态新增和视图的自动更新。