Vue2.0 Vue.set的使用

青旅半醒 2021-09-18 02:22 332阅读 0赞

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

根据官方文档定义：**如果在实例创建之后添加新的属性到实例上，它不会触发视图更新**。

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

看以下实例：

<template>
         <div>
        <p @click="addd(obj)">{
       {obj.d}}</p>
        <p @click="adde(obj)"> {
       {obj.e}}</p>
    </div>
    </template>
    
     <script>
      export default {
          data(){
                return {
                    obj:{}
                }
          },
          mounted() {
            this.obj = {d: 0};
            this.obj.e = 0;
            console.log('after--', this.obj);
          },
         methods: {
            addd(item) {
                item.d = item.d + 1;
                console.log('item--',item);
            },
            adde(item) {
                item.e = item.e + 1;
                console.log('item--',item);
            }
           }
      }
     </scirpt>

![Image 1][]

image.png

可以看出d属性是有get 和 set方法的，而新增的e属性是没有的。

点击触发3次addd，点击触发3次adde,页面效果及控制台信息如下

![Image 1][]

image.png

![Image 1][]

image.png

此时触发1次addd,页面效果如下：

![Image 1][]

image.png

![Image 1][]