解决vue的component标签渲染问题

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。

vue如何识别import对象和require对象

  • require是CommonJs的语法(AMD规范引入方式),CommonJs的模块是对象。
  • import是es6的一个语法标准(浏览器不支持,本质是使用node中的babel将es6转码为es5再执行,import会被转码为require),es6模块不是对象
  • require是运行时加载整个模块(即模块中所有方法),生成一个对象,再从对象上读取它的方法(只有运行时才能得到这个对象,不能在编译时做到静态化),理论上可以用在代码的任何地方
  • import是编译时调用,确定模块的依赖关系,输入变量(es6模块不是对象,而是通过export命令指定输出代码,再通过import输入,只加载import中导的方法,其他方法不加载),import具有提升效果,会提升到模块的头部(编译时执行)
  • exportimport可以位于模块中的任何位置,但是必须是在模块顶层,如果在其他作用域内,会报错

这算解决了一个问题,可是component的Is属性时可以识别require和import对象,我直接丢进去,可是还是不行。

然后注意到一个点,VUE的生命周期!

然后发现我实在mounted导入的对象。。。。。。

提醒一下自己和看到的人,请不要在mounteds使用require和import,我改到created里面执行函数就可以。理论来说beforeCreated和beforeMounted也可以使用。未尝试过。

还有提醒一下,思考一个问题,不要钻牛角尖,换个思路,说不定豁然开朗,就像我这个问题。其实主要问题就是,导入对象的时期和导入的方法选择,而不是渲染。

component组件嵌套,导致页面重复渲染,重复请求的bug

因详情页面,有多个tab选项卡考虑页面多处重复使用,而且有多个页面组成,最终决定使用 组件方式来引用页面。

因 项目采用的UI组件是 element-ui,刚好看到有一个 样式很类似于 tab选项卡,就采用了 element的 tabs组件,可是 没想到问题就是出现 这儿。

解决vue的component标签渲染问题_第1张图片

错误代码


   
      
          
      
     

因为上述采用了 tabs选项卡,而且也使用 v-for循环(没办法,主要是 tabs是动态的),导致 每个页面不仅没有办法 缓存,反而 一直重复发送请求。自己百度了好久,最后没办法寻求帮助,在大佬们 远程帮助下 最终发现的是 tabs下的 v-for导致。

因为 component 写在v-for循环中,每次循环都会 创建一个 对象,导致创建很多的组件,点击一次tabs 循环后的 所有的 component都 发送了请求,每次点击一次后,都会减少一次请求(因为 keep-alive缓存的问题)。

最终解决的方法,不在 element-ui的 tabs组件,自己手写页面,反正样式不复杂。

正确代码

  • {{ item.label }}

这样的就可以避免创建多个组件,从而不在出现 重复发送请求的bug。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(解决vue的component标签渲染问题)