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

栏目: JavaScript · 发布时间: 5年前

内容简介:当我们把一个数据传给Vue实例data属性完成视图更新时,经过一番操作发现并没有更新。原因是因为Vue想要完成视图响应必须把JavaScript普通对象数据转为具有允许创建视图响应的方式有:

当我们把一个数据传给Vue实例data属性完成视图更新时,经过一番操作发现并没有更新。 console 打印发现数据只是JavaScript普通对象数据。

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

检测变化

允许创建视图响应的方式有:

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

实例

首先我们准备两组数据,, jsDatavueData

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

运行可以看出 jsData 不在vue实例内创建,不具备 getter/settervueData 通过vue实例内data属性创建初始属性值从而具备 getter/setter

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

不允许更新

视图监测不到变化的实例如下:

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 的属性。

运行结果:

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

允许更新

export default {
  mounted() {
    console.log(jsData, this.vueData);
    this.allow()
  },
  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 属性做了补充。

运行结果:

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

极简算法史:从数学到机器的故事

极简算法史:从数学到机器的故事

[法] 吕克•德•布拉班迪尔 / 任轶 / 人民邮电出版社 / 2019-1 / 39.00元

数学、逻辑学、计算机科学三大领域实属一家,彼此成就,彼此影响。从古希腊哲学到“无所不能”的计算机,数字、计算、推理这些貌似简单的概念在三千年里融汇、碰撞。如何将逻辑赋予数学意义?如何从简单运算走向复杂智慧?这背后充满了人类智慧的闪光:从柏拉图、莱布尼茨、罗素、香农到图灵都试图从数学公式中证明推理的合理性,缔造完美的思维体系。他们是凭天赋制胜,还是鲁莽地大胆一搏?本书描绘了一场人类探索数学、算法与逻......一起来看看 《极简算法史:从数学到机器的故事》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具