VUE：data中数据改变页面没渲染

2023-11-11 20:49| 来源: 网络整理| 查看: 265

在写代码过程中，有时会出现修改了data中某个Obj后，改变页面却没有重新渲染的情况。

例如：

{{testObj}} data() { return { testObj: { name: '张三' } } }, methods: { add() { this.testObj.age = '18岁' } }

在方法 add（）执行后 testObj 并没有渲染出 age

原因： Vue在创建页面时，会先遍历 data 中的数据，并为它们设置 getter 和 setter方法，以此作为实现数据双向绑定的基础。

但是，testObj 在声明时并没有 age 属性。根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

解决方案：

Vue.set(object, key, value) 使用set方法为对象添加属性 add() { this.$set(this.testObj, 'age', '18岁') }

使用set方法后，Vue会先为新增加的属性添加 getter 和 setter方法，并且重新渲染数据

this.$forceUpdate() 强制刷新 data并重新渲染 add() { this.testObj.age = '18岁' this.$forceUpdate() }

并不太推荐使用这种方式，频繁使用可能会出现页面闪烁

【本文地址】

公司简介

联系我们