直接添加属性的问题
<template>
<div>
<p v-for="(value,key) in item" :key="key">
{{ value }}
</p>
<button @click="addProperty">动态添加新属性</button>
</div>
</template>
<script>
export default {
data:()=>{
item:{
oldProperty:"旧值"
}
},
methods:{
addProperty(){
this.item.newProperty = "新值" // 为items添加新属性
console.log(this.items) // 输出带有newProperty的items
}
}
};
</script>
1234567891011121314151617181920212223242526
原因:组件初始化时,对data中的item进行递归遍历,对item的每一个属性进行劫持,添加set,get方法。我们后来新加的newProperty属性,并不是Object.defineProperty设置成响应式数据,修改后不会视图更新
Vue.set()
Object.assign()
$forcecUpdated()
123
Vue.set()
Vue.set( target, propertyName/index, value )
参数:
target:要修改的对象或数组
propertyName/index:属性或下标
value:修改后的value值
1234
this.$set(this.item, "newProperty", "新值");
1
Object.assign()
直接使用Object.assign()添加到对象的新属性不会触发更新
应创建一个新的对象,合并原对象和混入对象的属性
12
this.item = Object.assign({},this.item,{newProperty:'新值'})
1
$forceUpdate
this.item.newProperty = "新值"
this.$forceUpdate();
12
vue3是用过proxy实现数据响应式的,直接动态添加新属性仍可以实现数据响应式