vue2中解决数据更新视图不更新问题_vue2.0强制更新视图-CSDN博客

本文链接：https://blog.csdn.net/qq_65591699/article/details/126957301

本文介绍了Vue中解决引用类型属性变更导致视图不更新的问题，通过$set方法及JSON深拷贝两种方式实现视图的强制更新，并提供了具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中较为重要的一个知识点



//如果说引用数据类型没定义该属性，属性改变的时候视图不更新

//该如何解决？

//1. $set方法 （强制性更新视图）
//语法：

//this. $set (目标对象 / 数组, 属性 / 下标, 新值) ;

<template>
  <div class="about">
    <h1>{{ obj }}</h1>
    <h1>{{ arr }}</h1>
    <h1>{{ arr1 }}</h1>
    <button @click="change">更新</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      obj: {},
      arr: [],
      arr1: [{}, {}],
    };
  },
  methods: {
    change() {
      this.$set(this.obj, "name", "张三");
      this.$set(this.arr, 0, 1);
 
      this.$set(this.arr1, 0, { name: "张三" });
      this.$set(this.arr1[1], "name", "李四");
    },
  },
};
</script>

 2. JSON.parse(JSON.stringify( ) )
<template>
  <div class="about">
    <p>{{ obj }}</p>
    <h1>{{ arr }}</h1>
    <h2>{{ arr1 }}</h2>
    <button @click="change">更新</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      obj: {},
      arr: [],
      arr1: [{}, {}],
    };
  },
  methods: {
    change() {
      this.obj.name = "张三";
      this.obj = JSON.parse(JSON.stringify(this.obj));
 
      this.arr[0] = 1;
      this.arr = JSON.parse(JSON.stringify(this.arr));
 
      this.arr1[0] = { name: "张三" };
      this.arr1 = JSON.parse(JSON.stringify(this.arr1));
      
    },
  },
};
</script>