9. 可视化体系课

1. 使用v-charts实现地图好处是无需应用百度地图库、无需类似使用vue-charts的如下方式引入bmap插件

import 'echarts/extension/bmap/bmap'

2.可视化组件库

• 以下命令快速初始化生成package.json文件

npm init -y

• es、commonjs 模块都可以实现 tree-shaking效果 分析

// es 实现方式
export const a = 1
export const b = 2
// commonjs 实现方式
exports.a = 1
exports.b = 2

• rollup 配置打包.vue 文件过程碰到问题的解决方案

• rollup 打包支持async await语法需安装@babel/plugin-transform-runtime

3. SVG 知识点

• SVG 基础知道了解 SVG viewport、viewBox、preserveAspectRatio

• SVG 动画相关例子，常用的有animate/set/animateTransform/animateMotion

• symbol 相比 g 的优点是内部可以有独立的viewBox，外面使用的时候不需要设置viewBox属性

• 可以在svg标签中通过defs标签定义一些类似 js 中变量的图形，通过use标签配置href属性使用

• #id的这种用法有mask、fill、href属性，具体区别看代码

<svg :width="400" :height="400">
  <defs>
    <path id="fly-box-path" d="M5 5 L 395 5 L 395 395 L 5 395 Z" fill="none"></path>
    <radialGradient id="fly-box-radial" cx="50%" cy="50%" r="50%" fx="100%" fy="50%"></radialGradient>
    <mask id="fly-box-mask">
      <circle r="50%" fill="url(#fly-box-radial)"></circle>
    </mask>
  </defs>
  <use href="#fly-box-path" :stroke="starColor" stroke-width="3" mask="url(#fly-box-mask)"></use>
</svg>

4. MutationObserver

实际使用，相关的 API 看 MDN 介绍

const initMutationObserver = () => {
  observer = new window.MutationObserver(onReize)
  observer.observe(containerEle, {
    attributes: true,
    attributeOldValue: true,
    // attributeFilter: ['style'],
    // subtree: true,
  })
}

5. 开发 Vue3 组件库并在项目中使用npm link 进行热更新使用时，为防止报类似以下的类型错误，需要通过export default defineComponent({})的写法写业务组件。问题记录

[Vue warn]: Invalid VNode type: true (boolean)
 at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
 at <RouterView>
 at <App>