Vue2中给对象添加新属性界面不刷新?

在 Vue.js 中,如果你在对象上添加新属性而界面没有刷新,这可能是由于Vue的响应性系统的特性所导致的。Vue在初始化时会对数据进行响应式转换,这意味着只有在初始时存在的属性才会被监听,后来添加的属性不会自动触发视图更新。

我们从一个例子开始:



点击按钮,发现结果不及预期,数据虽然更新了(log打印出了新属性),但页面并没有更新。

有几种方法可以解决这个问题:

• 方法1:使用全局的Vue.set()



• 方法2:使用展开运算符,给对象重新赋值



• 方法3:使用Object.assign(),给对象重新赋值



• 方法4:采取$forceUpdate()进行强制刷新 (不建议)



小结

如果为对象添加少量的新属性,可以直接采用 Vue.set()

如果需要为新对象添加大量的新属性,则通过 展开运算符 或 Object.assign() 创建新对象

如果你实在不知道怎么操作时,可采取 $forceUpdate() 进行强制刷新 (不建议)

Tips:Vue3是用过proxy实现数据响应式的,直接动态添加新属性仍可以实现数据响应式。

你可能感兴趣的:(vue.js,前端)