vue修改数据页面不重新渲染

一、直接添加属性的问题

<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设置成响应式数据，修改后不会视图更新

二、原理

（1）、vue2是用过Object.defineProperty实现数据响应式
（2）、vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式

const item = {}
Object.defineProperty(obj, 'oldProperty', {
        get() {
            console.log(`get oldProperty:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                console.log(`set oldProperty:${newVal}`);
                val = newVal
            }
        }
    })
}

三、解决方案

Vue.set()  如果为对象添加少量的新属性，可以直接采用Vue.set()
Object.assign()	如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象
$forcecUpdated()	如果你需要进行强制刷新时，可采取$forceUpdate() (不建议)

• Vue.set()
  Vue.set( target, propertyName/index, value )

参数：
target：要修改的对象或数组
propertyName/index：属性或下标
value：修改后的value值

this.$set(this.item, "newProperty", "新值");

• Object.assign()

直接使用Object.assign()添加到对象的新属性不会触发更新
应创建一个新的对象，合并原对象和混入对象的属性

this.item = Object.assign({},this.item,{newProperty:'新值'})

• $forceUpdate

this.item.newProperty = "新值" 
this.$forceUpdate();

vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式