关于Vue中的属性值无法与视图同步的问题

Posted 2023-04-20

参考技术A

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
这是为什么呢？
让我们来看官方文档是怎么写的:
受现代 javascript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。由于 Vue会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue
转换它，这样才能让它是响应的。 例如：

我们首先在浏览器中查看 console.log(this.obj); 这句话的打印结果:

可以看出ValueA属性是有get 和 set方法的，而新增的ValueB属性是没有的。
让我们来触发三次增加ValueA的函数，网页打印结果如下:

同时页面上的显示情况:

由此看出，更新ValueA时，数据与视图会同步更新，而更新ValueB的时候数据会被更新而视图却不会被更新

解决方案 ：
官方定义：
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：
Vue.set(data.obj, \'key\', value)
您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
this.$set(this.obj,\'e\',02)
上述实例解决如下：

再分别触发增加ValueA和ValueB的函数，视图与数据都进行了更新:

vue中data值改变但页面视图不刷新问题

• 问题就在于vue页面视图的不更新
• 在这里要注意一点，根据官方描述所得：当vue的data里面声明或者已经赋值过的对象或数组（包含对象值），向对象里面添加新的属性和更新这个新属性的值，页面视图是不会更新的。

解决

• 要想更新数据的时候视图也更新，可以使用 $set 或者 Object.assign 来解决
  添加新属性的时候，使用下面的方法

export default {
      data() {
            return {
                  obj: {
                        a: 1,
                        b: 2
                  }
            }
      }
}
// 给obj添加新属性
// 1
this.$set(this.obj1, ‘c‘, 3)
// 2
Object.assign({}, this.obj, { c: 3 })

• 此处简单做个介绍，欲了解更多请移步下方官方文档???，点击下方链接即可

官方深入响应式原理