vue 组件深入（组件封装，函数式组件，优化技巧，组件设计）

组件封装

---

函数式组件（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个技巧

9个性能优化的方式

1. 使用函数式组件
2. 子组件拆分：将耗时任务拆分进入一个子组件
3. 局部变量：使用大量for循环使用局部变量时使用
4. v-show 或 v-if :会频繁渲染改用show
5. keep-alive:有需要页面缓存的业务场景使用
6. Deferred features:延时分批渲染组件
7. Time slicing 时间切割技术
8. Non-reactive data 非响应式数据，Object.freeze(),不可配置的data
9. 虚拟滚动组件：实时日志系统
10. 懒加载图片组件、异步组件/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常用组件

通用组件

业务组件

页面组件