Vue添加数据视图不更新问题
栏目: JavaScript · 发布时间: 5年前
内容简介:当我们把一个数据传给Vue实例data属性完成视图更新时,经过一番操作发现并没有更新。原因是因为Vue想要完成视图响应必须把JavaScript普通对象数据转为具有允许创建视图响应的方式有:
当我们把一个数据传给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() }, 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
属性做了补充。
运行结果:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- iOS小技巧·把子视图控制器的视图添加到父视图控制器
- CouchDB 视图简介及增量更新视图的方法
- c# – 将数据从部分视图传递到其父视图
- Django 基于函数的视图与基于类的视图
- 类视图
- laravel 基础教程 —— 视图
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。