Vue 3 Runtime Only包无初始组件挂载及多实例Vuex共享问题咨询

问题解答 #

1. Runtime Only 能否不配置初始App组件完成挂载？ #

不能。Runtime Only版本不带模板编译器，无法直接解析DOM里的自定义组件标签，也就不能像Runtime + Compiler版本那样直接挂载到#app节点后自动解析内部内容。你之前遇到的挂载后替换#app内全部内容的问题，本质就是将全页面交给Vue管控导致的，只要不把整个#app作为挂载容器就能避开这个问题。

2. 是否需要为每个用到的Vue组件单独创建实例？ #

是，这也是最匹配你需求的实现方案。你不需要把整个页面交给Vue管控，只需要给每个Vue组件预留单独的空DOM占位节点即可，完全不需要在原有HTML里写自定义组件标签，也就不会触发全页面内容解析。
具体改造示例如下：
首先调整原有HTML，把自定义组件标签替换为空白占位节点：

<div id="app">
    <h1>Some Text</h1>
    <p>Long Text</p>
    <!-- 表格组件占位节点 -->
    <div id="table-component-wrapper"></div>
    <p>Long Text</p>
    <p>Long Text</p>
    <!-- 其他组件占位节点 -->
    <div id="other-component-wrapper"></div>
    ...更多普通HTML内容
</div>

再调整JS代码，单独给每个占位节点挂载组件实例：

import { createApp, defineAsyncComponent } from 'vue'
import store from './store'

// 引入异步组件
const VComponentTable = defineAsyncComponent(() => import(/* webpackPrefetch: true */ '@components/VComponentTable'))
const VOtherComponent = defineAsyncComponent(() => import(/* webpackPrefetch: true */ '@components/VOtherComponent'))

// 挂载表格组件实例
const tableApp = createApp(VComponentTable)
tableApp.use(store)
tableApp.mount('#table-component-wrapper')

// 挂载其他组件实例
const otherApp = createApp(VOtherComponent)
otherApp.use(store)
otherApp.mount('#other-component-wrapper')

该方案不会修改#app内的其他原有内容，也不需要Vue解析全页面内容，完全符合你的需求。

3. 多实例如何共享Vuex？ #

直接将同一个store实例注册到所有组件的app实例上即可。你引入的store本身就是单例对象，不管给多少个app实例注册该store，所有实例读写的都是同一个store的状态，天然实现共享，不需要额外适配。

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