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

最新推荐文章于 2024-01-17 08:58:28 发布

原创最新推荐文章于 2024-01-17 08:58:28 发布 · 592 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

当在Vue中直接添加属性时，由于属性未被设置为响应式，导致页面不会自动更新。解决方法包括使用Vue.set，Object.assign或调用$forceUpdate。在Vue3中，借助Proxy，即使动态添加属性也能保持数据响应式。

直接添加属性的问题

<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 )

参数：
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实现数据响应式的，直接动态添加新属性仍可以实现数据响应式