如何动态引入vue组件?
发布网友
发布时间：9小时前
共1个回答
热心网友
时间：8小时前
为了实现动态引入Vue组件，首先需要理解动态加载的概念。动态加载意指将模板代码存储在数据库中，而非传统的使用动态require加载。这里假设模板代码为未编译的源代码，如单个Vue文件内容直接存入数据库，而不是编译后的代码。动态加载的方式应考虑代码的实时编译和渲染。
这一功能与codesandbox的能力相似，用户输入的代码可以被持久化为模板，模板不仅限于template，还可能包括JS和CSS，这样的代码更灵活、更强大。每次打开页面时，数据库恢复这些代码并实时编译，然后渲染出来。
Vue本身支持运行时编译，但这一特性往往被忽略。要获得运行时编译的能力，可以通过引入完整的Vue文件或在Vue.config.js中打开runtimeCompiler开关实现。
动态加载的核心方案有两种：动态组件和动态挂载。
动态组件方案不支持使用Vue.component('my-component-name', {/* */})创建组件，因为这种创建发生在根Vue实例创建之前。动态组件方案利用render函数和computed属性，Vue组件实质上是一个对象，包含template、data、method等属性，渲染过程是解析这个对象。
动态挂载方案则通过new Vue(component).$mount('#id')将持久化的代码挂载到DOM节点，适合用于将挂载点置于iframe中，实现隔离。然而，Vue2及之后版本中，挂载点在完成VM挂载后会被完全替换，这了某些需要多次重绘的场景。
解决重绘的方法是在外层包裹一层DOM节点，即使挂载点消失，注入的外层DOM也能充当再次挂载的节点。
动态挂载的主要应用场景是iframe隔离，对于XSS攻击的防护更加安全。动态挂载有跨域和非跨域两种实现方式。
非跨域实现相对简单，可以相互操作document，动态添加iframe，加载script、style等资源。跨域实现则需要内置依赖静态资源，同时内置处理元素、挂载、卸载和通信的js逻辑。
跨域方案下，主域与iframe需通过postMessage通信，但postMessage的了函数传递。组件中可能包含函数，需要进行编码和解码，这会导致函数特性如闭包的丢失。
理想情况下，iframe指向的html应具备动态能力，可以直接发起请求获取持久化数据，而不是通过主域的postMessage传递。主域与iframe的通信应简化为指令，iframe内部维护指令映射，以规避postMessage。
动态挂载方案有三种实现方式：在当前页面提供挂载点、动态加载同域iframe并加载资源、动态加载跨域iframe并通过postMessage通信。
虽然动态挂载方案的代码较多，但核心逻辑已经解释。如需更详细的讲解，可直接查看相关文章或源码。
