组件封装
函数式组件(HOC)
一个无状态无实例无生命周期的组件
没有管理任何状态
没有生命周期
没有this实例
Vue.component('myComp',{
functional:ture,
props:{
},
render(createElement,context){
const {props,children,slots,scopedSlots,data,listenners,injections,parent} = context;
}
})
.vue单文件
<template functional>
</template>
<script>
export default{
}
</script>
使用简单的render 函数渲染
用处:静态文本,tag标记
例子:
App.vue中:
FuncComp.vue中
vue优化的9个技巧
- 使用函数式组件
- 子组件拆分:将耗时任务拆分进入一个子组件
- 局部变量:使用大量for循环使用局部变量时使用
- v-show 或 v-if :会频繁渲染改用show
- keep-alive:有需要页面缓存的业务场景使用
- Deferred features:延时分批渲染组件
- Time slicing 时间切割技术
- Non-reactive data 非响应式数据,Object.freeze(),不可配置的data
- 虚拟滚动组件:实时日志系统
- 懒加载图片组件、异步组件/CDN
组件设计
- vue create
- vue add element
- mock 数据(swagger)vue - element -admin
- 新建vue.config.js,mock数据
- 和服务端交互
- 1 ui组件交互操作
- 2调用同一个管理的apiserveice请求函数
- 3使用封装的request.js发送请求
- 4获取服务端返回
- 5更新data
- yarn add axios
1mock数据
2前端交互后端数据接口
3try-catch如何处理异常
4element常用组件
通用组件
业务组件
页面组件