Vue.js异步组件响应性异常问题排查求助

你的问题核心在于外部编译的子组件与主应用使用了独立的Vue实例，导致响应性系统无法互通，具体细节如下：

• 外部子组件编译时未将Vue设为外部依赖：Webpack打包子组件时，默认会把Vue库一同打包，使得子组件运行时使用的是自身打包的Vue实例，而非主应用的Vue实例。
• Vue响应性依赖同一实例：Vue的ref、reactive等响应式API是基于当前Vue实例的内部实现的，子组件用独立Vue实例时，自身的响应式数据无法被主应用的渲染系统正确追踪。
• 父组件prop触发更新的假象：点击父组件递增按钮时，主应用的Vue实例会触发全局重新渲染，此时会重新执行子组件的渲染函数，相当于强制刷新了子组件DOM，所以看起来子组件也更新了；但子组件自身的counter数据属于另一个Vue实例，其变化无法触发自身DOM更新。
• 移除prop后完全不更新的逻辑：没有了父组件prop变化触发的主应用重新渲染，子组件自身的响应式变化无法被主应用渲染系统感知，因此DOM完全停止更新。

• 配置子组件的Webpack externals，将Vue声明为外部依赖，让子组件运行时复用主应用的Vue实例：

  // 子组件的webpack.config.js
  module.exports = {
    // ...其他配置项
    externals: {
      vue: 'Vue'
    }
  }
  

• 确保主应用加载子组件前，Vue已以全局变量（window.Vue）形式存在，或通过模块导入共享同一Vue实例。

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