Vue3+TS Day40、Day41、Day42、Day43 - 爷孙动态插槽、 Echarts

day40

1、这节主要涉及内容

• ① hyform 中的 input、picker 双向绑定思路
• ② 分页器相关细节处理
• ③ 用户权限管理逻辑的代码思路

2、爷孙组件如何定义动态插槽？

• 主要是对 默认插槽、具名插槽、作用域插槽、动态名插槽的掌握
• 把插槽和代码中的block或闭包对比，就可以比较完美的理解插槽的作用了。

day41

1、本章主要内容

• ① 删除用户功能实现
• ② 编辑和创建新用户的功能实现

2、众所周知，vuex中的数据是响应式的，它如果发生变化，哪些模块中的数据会跟着刷新？

• template
• computed
• watchEffect

3、所以在template里面如果绑定的【复杂且非响应式的数据】需要动态刷新，通常怎么做？

• 可以用computed函数进行包裹

day42

1、本章主要内容

• 实现新建角色的权限配置页面，有个比较复杂的树形结构。

image.png

day43 ECharts

1、什么是ECharts？最早由哪家公司开源的？

-【ECharts】一个基于 JavaScript 的开源可视化图表库；
-【最早开源】最早是由百度团队开源；

image.png

2、ECharts 几种引入方式？

image.png

3、在setup函数体内，我们需要用ref绑定template元素，要放在哪个生命周期后面？

• 放在 onMounted 之后

image.png

4、代码上使用 ECharts 最主要的三步是什么？

• 【一】初始化 ECharts 实例
• 【二】配置 Options（图表数据）
• 【三】设置配置，开始绘制

image.png

5、ECharts 的 canvas模式 VS svg模式？

image.png

image.png

image.png

6、下面页面结构怎么进行分层？

image.png

• 【基础层：BaseEchart.vue】hook 解决 ECharts 的引入问题，方便后续换第三方库
• 【中间层：PieChart.vue】hook 解决 options 的数据结构问题，部分写死，部分从外部动态传入
• 【使用层：DashBoard.vue】借助 vuex 发起网络请求，解决数据源问题

7、vue实现数字增长的动画效果，实现思路？

• 用 gasp 库
• 用 countUp 库

8、如果ECharts官网案例里面没有找到我们想要的效果，怎么办？（比如上面的地图）

• 官网上面还有一个社区库，里面也有很多案例
• 比如 【ECharts Gallery】平台