小知识,大挑战!本文正在参与“ 程序员必备小知识 ”创作活动
有的时候我们变化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需要谨慎使用。
原因:
它会强制整个组件的渲染,如果频度没有控制好,会一直渲染,导致应用性能变得很低!!