Vue.js组件继承后数据未同步更新的问题咨询

这确实是Vue中extends特性的预期行为，我来帮你拆解原因和解决办法：

为什么会出现不同步的情况？ #

Vue组件的data选项是一个函数，每次创建组件实例时，都会调用这个函数返回一个全新的对象——这是Vue为了保证每个组件实例的状态独立设计的核心机制。

当你用extends继承组件a时，组件b会复用a的选项配置，但每个b的实例依然会自己执行data函数，生成完全独立的myArray副本。也就是说，a组件实例里的myArray和b组件实例里的myArray是两个互不关联的变量，自然不会同步更新。

如何让继承组件同步更新数据？ #

既然组件实例的状态是独立的，我们需要通过「共享状态」或者「组件通信」的方式来实现同步，这里给你两种最常用的方案：

方案1：通过父组件传递数据（适合兄弟/父子组件场景） #

把共享的myArray提升到父组件中，让a和b都依赖父组件的数据，实现状态统一：

<!-- 父组件模板 -->
<div id="app">
  <a :my-array.sync="parentMyArray" />
  <b :my-array="parentMyArray" />
</div>

// 组件a的定义，通过props接收并更新父组件数据
Vue.component('a', {
  props: ['myArray'],
  template: `
    <div>
      <input type="text" v-model="localInput" />
      <button v-on:click="saveData">Save</button>
    </div>
  `,
  data() {
    return {
      localInput: ''
    }
  },
  methods: {
    saveData : function(){
      const vm = this;
      axios.post('/save', { })
      .then(function (response) {
        // 通过sync修饰符触发父组件数据更新
        vm.$emit('update:myArray', response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
    },
  }
});

// 组件b的定义，直接通过props接收父组件数据
Vue.component('b', {
  props: ['myArray'],
  template: '<div v-if="myArray.length > 0">On Target</div>'
});

// 父组件实例，维护共享状态
new Vue({
  el: '#app',
  data: {
    parentMyArray: []
  }
});

方案2：使用全局状态管理（适合复杂多组件共享场景） #

如果你的项目中有多个组件需要共享同一状态，推荐使用Vuex（Vue2）或者Pinia（Vue3）来统一管理数据，避免组件间复杂的通信逻辑：

以Vue2的Vuex为例：

// 创建全局状态store
const store = new Vuex.Store({
  state: {
    myArray: []
  },
  mutations: {
    // 定义修改状态的唯一方式
    UPDATE_MY_ARRAY(state, newData) {
      state.myArray = newData;
    }
  },
  actions: {
    // 处理异步请求
    fetchMyArray({ commit }) {
      return axios.post('/save', {})
        .then(response => {
          commit('UPDATE_MY_ARRAY', response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

// 组件a的定义，通过store更新状态
Vue.component('a', {
  template: `
    <div>
      <input type="text" v-model="localInput" />
      <button v-on:click="saveData">Save</button>
    </div>
  `,
  data() {
    return {
      localInput: ''
    }
  },
  methods: {
    saveData() {
      this.$store.dispatch('fetchMyArray');
    }
  }
});

// 组件b的定义，从store获取实时状态
Vue.component('b', {
  computed: {
    myArray() {
      return this.$store.state.myArray;
    }
  },
  template: '<div v-if="myArray.length > 0">On Target</div>'
});

// 根实例注入store，让所有组件都能访问
new Vue({
  el: '#app',
  store
});

额外说明：关于extends的正确使用场景 #

extends主要是用来复用组件的选项逻辑（比如methods、computed、生命周期钩子等），而不是用来共享组件实例的状态。如果只是想复用逻辑，同时需要共享状态，依然要通过上述的通信或状态管理方案来实现。

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