共计 1768 个字符，预计需要花费 5 分钟才能阅读完成。
| 导读 | 这篇文章主要介绍了解决 vue 的 component 标签渲染问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 |
最近遇到一个问题，就是通过 LoadJs 方法加载的组件怎么通过 component 实现热加载问题
vue 的 component 标签是个虚拟 dom, 在真实 dom 树上需要 vue 进行渲染，显示。而我最近遇到的问题，我通过 LoadJS 方法，从 A 项目读取 B 项目的对象，页面并已组件的形式渲染到 A 项目页面上，组件没法渲染。
我第一反应 是 this.$forceUpdate()，渲染一下就是，可是并没有成功。
然后想到一个问题 VUE 如何识别加载虚拟 DOM 和如何识别路由里绑定的页面？import 对象和 require 对象有什么区别，什么时候用
想了一堆这类的问题，实际上 import 和 require 的区别，好多文章都有说明，而且解释的很好。个人看来最大的区别就是一个是静态编译和一个动态编译。也就是一个脚本运行完后编译。
所以我这里应该是动态编译，因为外部 Js 文件在是一个 blob 对象，无法根据 import，指定路径，运行时候在访问对应的 Js 文件。也就是这个路径是个虚拟的，无法真实找到的时候，不要用 import。
require 是 CommonJs 的语法（AMD 规范引入方式），CommonJs 的模块是对象。
import 是 es6 的一个语法标准（浏览器不支持，本质是使用 node 中的 babel 将 es6 转码为 es5 再执行，import 会被转码为 require），es6 模块不是对象
require 是运行时加载整个模块（即模块中所有方法），生成一个对象，再从对象上读取它的方法（只有运行时才能得到这个对象, 不能在编译时做到静态化），理论上可以用在代码的任何地方
import 是编译时调用，确定模块的依赖关系，输入变量（es6 模块不是对象，而是通过 export 命令指定输出代码，再通过 import 输入，只加载 import 中导的方法，其他方法不加载），
import 具有提升效果，会提升到模块的头部（编译时执行）
export 和 import 可以位于模块中的任何位置，但是必须是在模块顶层，如果在其他作用域内，会报错
这算解决了一个问题，可是 component 的 Is 属性时可以识别 require 和 import 对象，我直接丢进去，可是还是不行。
然后注意到一个点，VUE 的生命周期！
然后发现我实在 mounted 导入的对象。。。。。。提醒一下自己和看到的人，请不要在 mounteds 使用 require 和 import，我改到 created 里面执行函数就可以。理论来说 beforeCreated 和 beforeMounted 也可以使用。未尝试过。还有提醒一下，思考一个问题，不要钻牛角尖，换个思路，说不定豁然开朗，就像我这个问题。其实主要问题就是，导入对象的时期和导入的方法选择，而不是渲染。
因详情页面，有多个 tab 选项卡考虑页面多处重复使用，而且有多个页面组成，最终决定使用 组件方式来引用页面。
因 项目采用的 UI 组件是 element-ui，刚好看到有一个 样式很类似于 tab 选项卡，就采用了 element 的 tabs 组件，可是 没想到问题就是出现 这儿。
因为上述采用了 tabs 选项卡，而且也使用 v-for 循环（没办法，主要是 tabs 是动态的），导致 每个页面不仅没有办法 缓存，反而 一直重复发送请求。自己百度了好久，最后没办法寻求帮助，在大佬们 远程帮助下 最终发现的是 tabs 下的 v-for 导致。
因为 component 写在 v -for 循环中，每次循环都会 创建一个 对象，导致创建很多的组件，点击一次 tabs 循环后的 所有的 component 都 发送了请求，每次点击一次后，都会减少一次请求（因为 keep-alive 缓存的问题）。
最终解决的方法，不在 element-ui 的 tabs 组件，自己手写页面，反正样式不复杂。
{{item.label}}这样的就可以避免创建多个组件，从而不在出现 重复发送请求的 bug。
