Vue添加数据视图不更新问题

前言

当咱们把一个数据传给Vue实例data属性完成视图更新时，通过一番操做发现并无更新。 console 打印发现数据只是JavaScript普通对象数据。

缘由是由于Vue想要完成视图响应必须把JavaScript普通对象数据转为具备getter/setter的属性对象数据。当调用setter被调用时Vue捕获数据从而完成响应组件更新。 Vue.js - 深刻响应式原理

检测变化

容许建立视图响应的方式有：

• 在Vue实例data中添加初始属性值做为响应节点
• 经过$set方法动态添加响应节点

实例

首先咱们准备两组数据，，jsData和vueData。

const jsData = {
  ja: "张三",
  jb: "李四"
}
export default {
  data() {
    return {
      vueData: {
        va: "张三",
        vb: "李四"
      }
    }
  },
  mounted() {
    console.log(jsData, this.vueData);
  },
  // ...
}
复制代码

运行能够看出jsData不在vue实例内建立，不具有getter/setter，vueData经过vue实例内data属性建立初始属性值从而具有getter/setter。

不容许更新

视图监测不到变化的实例以下：

export default {
  // ...
  mounted() {
    console.log(jsData, this.vueData);
    this.notAllow()
  },
  methods: {
    notAllow() {
      // demo 1
      this.vueData.newKeyA = "keyA";
      console.log(this.vueData);

      // demo 2
      // Object.assign(this.vueData, { newKeyA: "keyA" });
      // console.log(this.vueData);

      // demo 3
      // this.vueData = Object.assign(this.vueData, { newKeyA: "keyA" });
      // console.log(this.vueData);
    }
  }
}
复制代码

上述代码中都有一个问题，在同一个引用类型中插入数据，致使数据对象自己没有改变，也就意味着Vue检查不到数据内存指向作更改，这就会致使插入的只是不具有getter/setter的属性。

运行结果：

容许更新

export default {
  mounted() {
    console.log(jsData, this.vueData);
    this.allow()
  },
  methods: {
    allow() {
      // demo 1
      this.vueData = {
        ...this.vueData,
        newKeyA: "keyA"
      }
      console.log(this.vueData);

      // demo 2
      // this.$set(this.vueData, "newKeyA", "keyA");
      // console.log(this.vueData);
    }
  }
}
复制代码

上述demo1的方式是替换一个内存指向完成数据变化。 demo2是经过Vue实例提供的$set方法, 在不改变内指向的同时，添加一个的具有getter/setter属性作了补充。

运行结果：

例子

本文提供demo见：GitHub

*