vue中 this.$set的解释和用法

 问题：

    当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

解决：

调用方法:

​​​​​​​ this.$set(target,key,value)

   target:要更改的数据源（可以是一个对象或者数组）
   key:要更改的具体数据 （索引）
   value: 重新赋的值 

栗子：

（1）单个修改

this.items[0].message='one1'; //一般是可以更新视图  

this.$set的写法：

this.$set(this.items[0],'message','one1'); //数字类型可省略引号

 （2）多个修改

this.items[0] = { message: "one3", id: "13" };//视图未更改

this.$set的写法：

this.$set( this.items, 0, { message: "one3", id: "13" })

（3）添加修改

this.items[3]={ message: "four", id: "4" };//数据已经被改变  但是视图层未渲染

 this.$set的写法：

this.$set( this.items, 3, { message: "four", id: "4" })//视图渲染

附录：

<!--
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2021-09-28 17:04:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-09-28 17:28:22
-->
<template>
  <div>
    <div v-for="item in items" :key="item">
      <ul :key="item">
        <li>{{ item.id }}---{{ item.message }}</li>
      </ul>
    </div>
    <button @click="handle">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { message: "one", id: "1" },
        { message: "two", id: "2" },
        { message: "three", id: "3" },
      ],
    };
  },
  methods: {
    handle() {
      console.log("dfsdf");
      // this.items[0].message='one1';
      // this.$set(this.items[0],'message','better')
      // this.items[0] = { message: "one3", id: "13" };
      this.$set( this.items, 0, { message: "one3", id: "13" })
    },
  },
};
</script>

<style>
</style>