vue component标签渲染

时间:2022-05-28 捡垃圾的小白人气:10

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具有提升效果，会提升到模块的头部（编译时执行）
export和import可以位于模块中的任何位置，但是必须是在模块顶层，如果在其他作用域内，会报错

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

然后注意到一个点，VUE的生命周期！

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

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

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

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

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

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

在这里插入图片描述

错误代码

<el-tabs class="header-tabs" v-model="activeName" @tab-click="handleClick">
   <el-tab-pane
     v-for="item of tabs"
     :key="item.id"
     :label="item.label"
     :name="item.id"
     :component="item.component"
     lazy
     >
      <keep-alive exclude="ContentManage">
          <component :is="currentComponent" :customeroid="agencyid"></component>
      </keep-alive>
     </el-tab-pane>
</el-tabs>

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

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

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

正确代码

<ul class="tabs-ul">
    <li
        v-for="(item) in currentTabs"
        :key="item.id"
        :class="{ active: tabSelect === item.id }"
        @click.prevent="changetabs(item.id)"
        >
        {{ item.label }}
    </li>
</ul>
<keep-alive exclude="ContentManage">
    <component :is="currentComponent" :customeroid="agencyid"></component>
</keep-alive>

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

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

加载全部内容