vue中 this.$set的用法详解

<template>
  <div>
    <p v-for="item in items" :key="item.age">{{ item.name }}</p>
    <button @click="handClick">更改数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "张三", age: 18 },
        { name: "李四", age: 28 },
        { name: "王五", age: 38 },
      ],
    };
  },

  methods: {
    handClick() {
      this.items[0] = { name: "二狗", age: 40 };
      // 此时items中，索引为0的这一项数据改变了，但是视图不会更新。

      let text = { name: "二狗", age: 40 };
      this.$set(this.items, 0, text);
      // $set 可以触发视图更新

      // 双向数据绑定才可以实现，数据改变，更新视图。
      // 当vue的data中声明的对象/对象数组已经赋值后，
      // 去更改属性的值，不会触发双向数据绑定，而$set可以实现。


      // Vue.set( target , key , value)
      // target: 要更改的数据源（可以是一个对象或者对象数组）
      // key 要更改的具体数据 （索引值）
      // value 重新赋的值
    },
  },
};
</script>