vue父组件值变化，子组件不刷新的问题（三种方案）

目录

1、在子组件使用 watch 监听 props 传过来的值，如果发现改变，调用 forceUpdate 刷新视图。

2、父组件中声明一个布尔变量，数据发生变化后，切换一下变量状态，可刷新子组件视图。

3、数据发生变化后，在下面调用一下 splice 方法修改原数组长度（索引、截取长度都为 0），数组不变，但视图可成功渲染。

4. 使用 this.$set

一、对象 使用 this.$set()，修改和新增

1、对象修改

2. 对象新增

3. 对象新增未知属性（这里的 item 是传递的参数，不带引号，”reading” 是参数值）

二、数组 使用 this.$set()，修改和新增

1. 数组修改

2. 数组新增

三、同理，执行删除操作时，对象或数组不更新时可以使用 this.$delete

父组件传递给子组件的数据，如果是一个复杂对象（例如一个数组或对象），那么子组件只会监听对象的引用而不是对象的内容。这意味着当对象的内容发生变化时，子组件不会更新。

解决：

1、在子组件使用 watch 监听 props 传过来的值，如果发现改变，调用 forceUpdate 刷新视图。

this.$forceUpdate()

2、父组件中声明一个布尔变量，数据发生变化后，切换一下变量状态，可刷新子组件视图。

3、数据发生变化后，在下面调用一下 splice 方法修改原数组长度（索引、截取长度都为 0），数组不变，但视图可成功渲染。

—————————————————- 推荐使用这种方案 -————————————————–

this.list.splice(0, 0)

4. 使用 this.$set

一、对象 使用 this.$set()，修改和新增

 定义数据对象：obj: {name: "小明", age: 18,},        

  基本语法：this.$set(需要改变的对象，"需要改变的对象属性"，"新值")

1、对象修改

this.$set(this.obj, “name”, “ 小刘 ”);

控制台输出：obj: {name: “ 小刘 ”, age: 18,},

2. 对象新增

this.$set(this.obj, “hobby”, “study”);

控制台输出：obj: {name: “ 小明 ”, age: 18, hobby: “study”},

3. 对象新增未知属性（这里的 item 是传递的参数，不带引号，”reading” 是参数值）

二、数组 使用 this.$set()，修改和新增

 定义数组包对象：arr: [{ name: "小王", age: 18},
  {name: "小张", age: 20},
],

  定义普通数组：twoArr: [11, 22, 33,],                          

  基本语法：this.$set(需要修改的数组，需要修改的数组下标，{ "要修改的数组对象，一个 / 多个"})

1. 数组修改

修改数组对象：

this.$set(this.arr, 1, { name: “ 小王 ”, age: 19});

控制台输出：arr: [{ name: “ 小王 ”, age: 18},{name: “ 小王 ”, age: 19}, ],

修改普通数组：

this.$set(this.twoArr, 0, 99);

控制台输出：twoArr: [99, 22, 33,],

2. 数组新增

首先需要获取新增的数组长度：

let reslg = this.arr.length;  

this.$set(this.arr, reslg,{ name: "小紫", age: 18},);
 
控制台输出：arr: [{ name: "小王", age: 18},
        {name: "小张", age: 20},
        {name: "小紫", age: 18},
     ],

三、同理，执行删除操作时，对象或数组不更新时可以使用 this.$delete

this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。

使用 this.$delete 可以解决 Vue 响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过 this.$delete 方法，可以显式地告诉 Vue，某个属性已经被删除，从而触发视图的更新。

 基本语法：this.$delete(this.obj, "name")