直接修改对象或数组的属性未触发视图更新_数组push没有触发试图更新-CSDN博客

本文链接：https://blog.csdn.net/qq_37757277/article/details/144012616

直接修改对象或数组的属性可能不会触发视图更新

在 Vue 中，响应式系统的工作原理决定了某些情况下直接修改对象或数组的属性可能不会触发视图更新。以下是详细的解释和解决方案：

1. 为什么直接修改对象或数组的属性可能不会触发响应式更新？

在 Vue 2 中，Vue 的响应式系统基于 Object.defineProperty，它无法检测到以下情况：

数组的索引修改：例如 this.array[0] = newValue。
对象的新属性添加：例如 this.obj.newProp = value。

在 Vue 3 中，响应式系统基于 Proxy，理论上可以检测到所有属性的变化，包括新增属性和数组索引的修改。但是，如果数据是从外部传入的（例如通过 props），或者数据本身不是响应式的（例如普通的 JavaScript 对象），那么修改这些数据可能不会触发视图更新。

2. 如何确保数据是响应式的？

情况 1：数据在 `data` 中定义

如果数据是通过 data 定义的，Vue 会自动将其转换为响应式数据。例如：

data() {
  return {
    geometries: [
      {
        paths: [], // 初始化为空数组
      },
    ],
  };
}

在这种情况下，直接修改 geometries 或其内部的属性会触发视图更新：

this.geometries[0].paths = formattedData; // 响应式更新

情况 2：数据通过 `props` 传入

如果 geometries 是通过 props 传入的，Vue 不会自动将其转换为响应式数据。为了确保它是响应式的，可以在子组件中创建一个本地副本：

props: {
  geometries: {
    type: Array,
    required: true,
  },
},
data() {
  return {
    // props 是父组件传递给子组件的数据，子组件可以通过 props 接收这些数据。如果需要将 props 的值赋给 data 的属性，可以在 data() 方法中初始化时进行赋值; 但如果父组件更新了 props 的值，data 中的 localValue 不会自动更新
    // 如果父组件更新了 props 的值，并且需要同步更新 data 中的属性，可以使用 watch
    // 如果父组件更新了 props 的值，并且需要同步更新，             可以使用 computed
    localGeometries: JSON.parse(JSON.stringify(this.geometries)), // 创建响应式副本, 深拷贝到 data 中以避免直接修改 props
  };
},

然后在子组件中操作 localGeometries，而不是直接操作 props.geometries。

使用 `watch` 监听 `props` 的变化

如果父组件更新了 props 的值，并且需要同步更新 data 中的属性，可以使用 watch。

export default {  
  props: {  
    initialValue: {  
      type: String,  
      default: ''  
    }  
  },  
  data() {  
    return {  
      localValue: this.initialValue // 初始化时赋值  
    };  
  },  
  watch: {  
    // 监听 props 的变化  
    initialValue(newValue) {  
      this.localValue = newValue; // 当 props 变化时更新 data  
    }  
  }  
};

使用场景

当父组件动态更新 props 的值时，子组件需要同步更新 data 中的属性。

使用 `computed` 实现双向绑定

如果需要实现双向绑定，可以使用 computed 属性，通过 get 和 set 方法实现。

export default {  
  props: {  
    value: {  
      type: String,  
      default: ''  
    }  
  },  
  computed: {  
    localValue: {  
      get() {  
        return this.value; // 从 props 获取值  
      },  
      set(newValue) {  
        this.$emit('update:value', newValue); // 通知父组件更新  
      }  
    }  
  }  
};

使用场景

当需要实现双向绑定时（例如使用 v-model）。
父组件和子组件之间需要实时同步数据。

3. 替换整个数组或对象

如果直接修改数组或对象的属性无法触发响应式更新，可以通过替换整个数组或对象来强制触发更新。例如：

替换整个数组

this.geometries = [
  {
    paths: formattedData,
  },
];

替换整个对象

this.geometries[0] = {
  paths: formattedData,
};

这种方式适用于 Vue 2 和 Vue 3，因为 Vue 的响应式系统会检测到数组或对象的引用发生了变化，从而触发视图更新。

4. 使用 Vue 3 的响应式工具

在 Vue 3 中，可以使用 reactive 或 ref 来确保数据是响应式的：

使用 `reactive`

import { reactive } from 'vue';

export default {
  setup() {
    const geometries = reactive([
      {
        paths: [],
      },
    ]);

    function updatePaths(formattedData) {
      geometries[0].paths = formattedData; // 响应式更新
    }

    return {
      geometries,
      updatePaths,
    };
  },
};

使用 `ref`

如果数据是数组，可以使用 ref：

import { ref } from 'vue';

export default {
  setup() {
    const geometries = ref([
      {
        paths: [],
      },
    ]);

    function updatePaths(formattedData) {
      geometries.value[0].paths = formattedData; // 响应式更新
    }

    return {
      geometries,
      updatePaths,
    };
  },
};

5. 注意事项

深拷贝数据
- 如果数据是从外部传入的（例如通过 props），并且需要在子组件中修改，建议创建一个本地副本（深拷贝），以避免直接修改父组件的数据。
- 可以使用 JSON.parse(JSON.stringify(data)) 或其他深拷贝工具（如 lodash 的 cloneDeep）。
避免直接修改 props
- 直接修改 props 会导致 Vue 抛出警告：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.
数组的响应式操作
- 使用 Vue 提供的数组方法（如 push、splice 等）来操作数组，而不是直接修改数组的索引。