阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

解决vue的component标签渲染问题的方法

84次阅读
没有评论

共计 1768 个字符,预计需要花费 5 分钟才能阅读完成。

导读 这篇文章主要介绍了解决 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 具有提升效果,会提升到模块的头部(编译时执行)

export 和 import 可以位于模块中的任何位置,但是必须是在模块顶层,如果在其他作用域内,会报错

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

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

然后发现我实在 mounted 导入的对象。。。。。。提醒一下自己和看到的人,请不要在 mounteds 使用 require 和 import,我改到 created 里面执行函数就可以。理论来说 beforeCreated 和 beforeMounted 也可以使用。未尝试过。还有提醒一下,思考一个问题,不要钻牛角尖,换个思路,说不定豁然开朗,就像我这个问题。其实主要问题就是,导入对象的时期和导入的方法选择,而不是渲染。

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

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

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

解决 vue 的 component 标签渲染问题的方法

错误代码

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

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

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

正确代码
{{item.label}}

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

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年,有高配

腾讯云新客低至 82 元 / 年,老客户 99 元 / 年

代金券:在阿里云专用满减优惠券

正文完
星哥玩云-微信公众号
post-qrcode
 0
星锅
版权声明:本站原创文章,由 星锅 于2024-07-25发表,共计1768字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中