vue组件的类型及特点

发布时间:2023年12月25日

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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。