vue.js: 浏览器方式引入vue,多个独立的 Vue 实例（适合组件间完全无关联）

一，示例代码：

<!-- 局部位置 A -->
<div id="part-a">
  <el-rate v-model="val"></el-rate>
</div>

<!-- 中间隔了很多原生代码... -->

<!-- 局部位置 B -->
<div id="part-b">
  <el-tag type="danger">警告状态：{{ state }}</el-tag>
</div>

<script>
  // 实例 A
  const appA = Vue.createApp({
    setup() { return { val: Vue.ref(3) }; }
  });
  appA.use(ElementPlus);
  appA.mount("#part-a");

  // 实例 B
  const appB = Vue.createApp({
    setup() { return { state: '异常' }; }
  });
  appB.use(ElementPlus);
  appB.mount("#part-b");
</script>

二，说明：

如果你无法更改页面大结构的 HTML，或者多个位置之间逻辑完全独立，你可以为每个局部位置分别实例化。

注意：这种写法下，appA 和 appB 的数据是不互通的。