vue组件的类型及特点
2023-12-26 02:52:46
vue组件的类型及特点
如果想要对组件进行类型划分,从实现的功能以及所具备的特点来划分,大致可以归纳为:动态组件、缓存组件、异步组件、函数式组件 + JSX、递归组件等
-
动态组件:通过动态确定要显示的组件, is指定要显示组件的组件名
<component :is="currentComp" />
问题: 当从A组件切换到B组件时, A组件就会销毁
-
缓存组件:即可以利用component,也可以使用router-view
- 使用缓存动态组件, 可以通过include或exclude指定只缓存特定组件
<keep-alive :exclude="['Home']"> <component :is="currentComp"/> </keep-alive>
- 使用也可以缓存路由组件
<keep-alive include="Life1"> <router-view></router-view> </keep-alive>
路由组件对象什么时候创建?
- 默认: 每次跳转/访问对应的路由路径时
- 有缓存: 第一次访问时
路由组件对象什么时候死亡?
- 默认: 离开时
- 有缓存: 离开时不死亡, 只有当destroy/父组件死亡/刷新页面
-
异步组件
- 好处:能更快的看到当前需要展现的组件界面(异步组件的代码开始没有加载)
- 无论是路由组件还是非路由组件都可以实现异步组件效果
- 拆分单独打包
- 需要时才请求加载组件对应的打包文件
- 配置组件: component: () => import(modulePath)
- import(modulePath): 被引入的模块会被单独打包(code split) --ES8的新语法
- () => import(modulePath): 函数开始不调用, 当第一次需要显示对应的界面时才会执行, 请求加载打包文件
- 细节
- import()返回promise, promise成功的结果就是整体模块对象
- 本质上: 可以利用import()实现对任意模块的懒加载
-
函数式组件 + JSX,与Vue的Component概念有明显不同,更雷同于React中的函数式组件
- 只能针对无状态(data)的组件
- 不用创建实例对象, 运行更快
- 可以没有根标签
export default { functional: true, // 当前是函数组件 render (createElement, context) { return 要显示界面的虚拟DOM } }
-
递归组件,组件内部有自己的子组件标签,简单的说就是组件自已调用自身
- 应用场景: 用于显示树状态结构的界面
- 注意: 递归组件必须有name
到这里也就结束了,希望对您有所帮助。
文章来源:https://blog.csdn.net/weixin_71893790/article/details/135208643
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!