建设部网站下载,石家庄做物流的网站,网站开发源程序,用旧手机做网站服务器在 Vue.js 中#xff0c;如果你在对象上添加新属性而界面没有刷新#xff0c;这可能是由于Vue的响应性系统的特性所导致的。Vue在初始化时会对数据进行响应式转换#xff0c;这意味着只有在初始时存在的属性才会被监听#xff0c;后来添加的属性不会自动触发视图更新。
我…在 Vue.js 中如果你在对象上添加新属性而界面没有刷新这可能是由于Vue的响应性系统的特性所导致的。Vue在初始化时会对数据进行响应式转换这意味着只有在初始时存在的属性才会被监听后来添加的属性不会自动触发视图更新。
我们从一个例子开始
templatedivp v-for(value, key) in items :keykey{{ value }}/pbutton clickhandleclick按钮/button/div
/templatescript
export default {name: HelloWorld,data() {return {items: {oldProperty: 旧属性}}},methods: {handleclick() {this.items.newProperty 新属性console.log(this.items) // 输出带有 newProperty 的 items}},}
/script
点击按钮发现结果不及预期数据虽然更新了log打印出了新属性但页面并没有更新。 有几种方法可以解决这个问题
• 方法1使用全局的Vue.set()
templatedivp v-for(value, key) in items :keykey{{ value }}/pbutton clickhandleclick按钮/button/div
/templatescript
export default {data() {return {items: {oldProperty: 旧属性}}},methods: {handleclick() {this.$set(this.items, newProperty, 新属性)}}
}
/script • 方法2使用展开运算符给对象重新赋值
templatedivp v-for(value, key) in items :keykey{{ value }}/pbutton clickhandleclick按钮/button/div
/templatescript
export default {data() {return {items: {oldProperty: 旧属性}}},methods: {handleclick() {const properties {newProperty1: 新属性1,newProperty2: 新属性2,newProperty3: 新属性3}this.items {...this.items,...properties}}}
}
/script • 方法3使用Object.assign()给对象重新赋值
templatedivp v-for(value, key) in items :keykey{{ value }}/pbutton clickhandleclick按钮/button/div
/templatescript
export default {data() {return {items: {oldProperty: 旧属性}}},methods: {handleclick() {const properties {newProperty1: 新属性1,newProperty2: 新属性2,newProperty3: 新属性3}this.items Object.assign({}, this.items, properties)}}
}
/script • 方法4采取$forceUpdate()进行强制刷新 (不建议)
templatedivp v-for(value, key) in items :keykey{{ value }}/pbutton clickhandleclick按钮/button/div
/templatescript
export default {name: HelloWorld,data() {return {items: {oldProperty: 旧属性}}},methods: {handleclick() {this.items.newProperty 新属性this.$forceUpdate()}},}
/script 小结
如果为对象添加少量的新属性可以直接采用 Vue.set()
如果需要为新对象添加大量的新属性则通过 展开运算符 或 Object.assign() 创建新对象
如果你实在不知道怎么操作时可采取 $forceUpdate() 进行强制刷新 (不建议)
TipsVue3是用过proxy实现数据响应式的直接动态添加新属性仍可以实现数据响应式。
