Laravel集成Vue时双实例挂载、CDN引入及组件使用相关问题咨询

问题1：双Vue实例挂载与冲突问题 #

• 两个Vue实例绝对不能挂载到同一个ID的DOM元素：同一DOM节点只能被一个Vue实例控制，后初始化的实例会完全覆盖前一个实例的绑定关系，导致先初始化的实例的数据、方法全部失效，产生不可预期的冲突。
• 正确的实现方案：给两个实例分别分配独立的、无嵌套关系的DOM挂载节点即可，比如：
  1. 原有blade内的逻辑挂载到#blade-app节点，对应编写<div id="blade-app"><!-- 原有blade内的Vue相关渲染逻辑 --></div>
  2. Mix编译的组件实例挂载到#component-app节点，对应编写<div id="component-app"><!-- 需要使用Vue组件的渲染逻辑，比如TinyMCE组件调用 --></div>
• 实例交互方式：两个独立实例默认作用域隔离，若需要跨实例调用数据或方法，可以将实例挂载到window全局对象上，比如window.bladeApp = new Vue({el: '#blade-app', ...})、window.componentApp = new Vue({el: '#component-app', ...})，即可通过全局对象互相访问，但尽量减少此类耦合操作。

问题2：CDN Vue资源是否保留的问题 #

• 不需要重复引入Vue，优先保证两份Vue的版本完全一致，可按以下两种方案二选一：
  1. 若可调整app.js代码：删除app.js里的window.Vue = require('vue').default代码，直接复用CDN引入的全局Vue构造函数，这样组件注册、两个实例初始化都用同一份Vue，不会出现版本冲突，也不会重复加载资源浪费体积。同时保证CDN的Vue script标签放在app.js的script标签之前加载即可。
  2. 若不能调整app.js代码：优先删除CDN的Vue引入，因为app.js已经将Vue挂载到window.Vue全局对象，原有blade内的Vue实例可以直接调用这个全局对象初始化，不需要额外CDN引入。
• 若因为特殊原因必须同时保留CDN和app.js内的Vue引入：必须保证两者版本完全一致，且严格控制加载顺序，避免版本不一致导致的组件编译、渲染错误。

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