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
到这里也就结束了，希望对您有所帮助。
