vue组件的类型及特点

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

到这里也就结束了，希望对您有所帮助。