Vue2中props传递的数据不更新，组件状态无响应怎么办？

调用store的activateAllAddons或deactivateAllAddons方法修改addon.active或activatedAddons数组后，SingleElement组件的switch控件完全不响应数据变更，控制台打印能确认数据已修改，但前端无感知。

代码基础 #

循环渲染部分 #

<SingleElement v-for="addon of addons" :key="addon.id" 
  :id="addon.id"
  :title="addon.name" 
  :description="addon.description"
  :active="addon.active" <!-- 需要更新的状态 -->
></SingleElement>

SingleElement组件模板 #

<template>
  <div class="column is-4">
    <b-field>
      <b-switch v-model="isActive"></b-switch>
    </b-field>
  </div>
</template>

<script>
import { store, methods } from '../../../store';

export default {
  name: "single-element",
  props: {
    id: Number,
    title: String,
    description: String,
    active: Boolean,
    docURL: String,
    category: String
  },
  data() {
    return {
      "isActive" : this.active
    }
  },
}
</script>

Store代码 #

import axios from "axios";

export const store = Vue.observable({
  "addons": [],
  "activatedAddons": [],
  "settings": {}
});

export const methods = {
  activateAllAddons() {
    store.activatedAddons = [];
    for (let addon of store.addons) {
      store.activatedAddons.push(addon.id);
      addon.active = true;
    }
  },
  deactivateAllAddons() {
    store.activatedAddons = [];
    for (let addon of store.addons) {
      addon.active = false;
    }
  },
}

尝试过的方法 #

• 直接修改store中addon的active属性，通过:active="addon.active"传递给组件
• 新增状态判断方法，通过:active="isActive(addon)"传递：

:active="isActive(addon)"

isActive(addon) {
  return store.activatedAddons.includes(addon.id);
}

问题原因 #

1. 组件内部data未同步props变化：SingleElement的isActive仅在组件初始化时从props.active赋值一次，后续props.active变更时，data里的isActive不会自动更新——data是组件初始化时的快照，不会随props动态同步。
2. 方法作为prop值的响应式缺陷：第二种尝试中，isActive(addon)作为prop传递时，Vue的响应式系统无法自动追踪store.activatedAddons的变化来触发重新计算，除非组件强制刷新。

解决方案 #

方案一：监听props同步状态 #

在SingleElement组件中添加watch监听active props，同步到isActive：

<script>
export default {
  // ... 其他代码
  watch: {
    active(newVal) {
      this.isActive = newVal;
    }
  }
}
</script>

方案二：使用computed实现双向绑定（推荐） #

避免用data复制props，改用computed绑定状态，同时通过store方法修改数据：

<template>
  <div class="column is-4">
    <b-field>
      <b-switch v-model="computedActive"></b-switch>
    </b-field>
  </div>
</template>

<script>
import { store, methods } from '../../../store';

export default {
  // ... 其他代码
  computed: {
    computedActive: {
      get() {
        return this.active;
      },
      set(newVal) {
        // 调用store方法修改对应addon的状态（需补充单个切换的store方法）
        // 示例：methods.toggleAddon(this.id, newVal);
      }
    }
  }
}
</script>

方案三：确保store数据的响应式（补充） #

如果store.addons是异步获取的，确保赋值时保持响应式：

async fetchAddons() {
  const res = await axios.get('/addons');
  // 直接替换数组是响应式的（store由Vue.observable创建）
  store.addons = res.data;
}

内容的提问来源于stack exchange，提问作者Vueer