Vue中this.$set的使用

项目中碰到一个问题，改变一个对象的属性，从控制台打印结果看，属性已经发生改变，但没有更新到视图中

解决：使用this.$set(target,key,value);

百度解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性。

注：target：要更改的数据源(可以是对象或者数组);       key：要更改的具体数据　　value ：重新赋的值

<template>

  <div>

    <p v-for="(item,index) in items" :key="index">{{item.message}}</p>

    <button @click="changeDataHandle">更改数据</button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      // 测试数据

      items: [{id: '1',message: 'one'},{id: '2',message: 'two'},{id: '3',message: 'three'}],

    }

  },

  mounted() {

    this.items[0] = {id: '0',message: '测试数据'};

    console.log('items==>>',this.items);//打印结果可以发现，items[0]的数据已经改变，但显示未变

  },

  methods: {

    // 点击时，this.$set改变数据,显示同时改变

    changeDataHandle() {

      this.$set(this.items,0,{message: '更改后的值',id: '0'});

    }

  }

}

</script>