vue表单修改值后页面输入框中的没有更新(表单的强制刷新)

501 阅读1分钟

小知识,大挑战!本文正在参与“    程序员必备小知识    ”创作活动

有的时候我们变化data内的内容,console.log打印的时候是显示已经变化了的,但并没有渲染到界面上去。受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

深入响应式原理

1.$set()方法重新渲染

this.$set(this.student,"age", 24)

2.深拷贝

let name2 = JSON.parse(JSON.stringify(this.name));
或者
this.taskForm = Object.assign({}, this.taskForm)

tip: Object.assign()拷贝当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。

参考链接

方法可以结合@input绑定输入框来执行。

3.$forceUpdate方法

this.$forceUpdate();

添加this.$forceUpdate();进行强制渲染,效果实现。搜索资料得出结果:因为数据层次太多,render函数没有自动更新,需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。

⚠️注意:
$forceUpdate需要谨慎使用。

原因:
它会强制整个组件的渲染,如果频度没有控制好,会一直渲染,导致应用性能变得很低!!