教猫吃鱼

Appearance

组件 ​

组件通信 ​

  • 父传子 props emit/on emit/bus
  • 子传父 v-model
  • 兄弟通信 emit/bus
  • 跨级 emit/bus， attrs/listeners ，provide/inject

如何二次封装一个扩展性高组件 ​

  1. 数据驱动样式，样式组件进行纯一些

  2. 传参的可扩展性 $attrs, 如果不希望透传某些属性比如class，可以通过useAttrs来实现

    vue
    <script setup>
import { computed, useAttrs } from 'vue'

const attrs = useAttrs()
const filteredAttrs = computed(() => {
  return { ...attrs, class: undefined }
})
</script>

  3. 暴露事件的可扩展性 通过defineExpose 显式公开 ref 属性

  4. 插槽的可扩展性

    vue
    <template v-for="{ value, key } in $slots" :key="key" #[key]="slotProps">
  <slot :name="key" v-bind="slotProps" />
</template>

  5. 类型提示 使用defineProps以及defineEmits导出

keep-alive ​

keep-alive 组件是 vue 的内置组件，用于缓存内部组件实例。这样做的目的在于，keep-alive 内部的组件切回时，不用重新创建组件实例，而直接使用缓存中的实例，一方面能够避免创建组件带来的开销，另一方面可以保留组件的状态。

  • include 和 exclude控制哪些组件进入缓存
  • max 设置最大缓存数

component ​

动态组件

complier ​

作用 ​

转换成渲染函数

组成 ​

  • parse：接受 template 原始模板，按着模板的节点和数据生成对应的 ast
  • optimize：遍历 ast 的每一个节点，标记静态节点，这样就知道哪部分不会变化，于是在页面需要更新时，通过 diff 减少去对比这部分DOM，提升性能
  • generate 把前两步生成完善的 ast，组成 render 字符串，然后将 render 字符串通过 new Function 的方式转换成渲染函数

性能查看 ​

⽤ timeline ⼯具。 通过 timeline 来查看每个函数的调⽤时常，定位出哪个函数的问题，从⽽能判断哪个组件出了问题。