直接添加属性的问题
<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>
原因:组件初始化时,对data中的item进行递归遍历,对item的每一个属性进行劫持,添加set,get方法。我们后来新加的newProperty属性,并不是Object.defineProperty设置成响应式数据,修改后不会视图更新
Vue.set()
Object.assign()
$forcecUpdated()
Vue.set()
Vue.set( target, propertyName/index, value )
参数:
targe