vue3-基础知识（5）- 复用

组合式函数

公式：ref+解构

1. 利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
2. 有状态逻辑负责管理会随时间而变化的状态
3. 可以嵌套多个组合式函数
4. 参数静态化及ref响应式
5. 命名：组合式函数约定用驼峰命名法命名，并以“use”作为开头
6. 函数参数问题：使用unref

• 若是ref则返回value，否则返回原始值。等价于解构ref。
• 一般用于函数的参数不确定是ref还是普通值时，提供兼容性。
• 如果你的组合式函数在接收 ref 为参数时会产生响应式 effect，请确保使用 watch() 显式地监听此 ref，或者在 watchEffect() 中调用 unref() 来进行正确的追踪.

7. 函数返回值问题：使用ref

• 返回一个包含多个 ref 的普通的非响应式对象
• ref解构后可保持响应式
• 不推荐使用reactive，解构后会丢失属性链接
• 使用对象形态时，可将useVue使用reactive包装。eg: const obj = reactive(useObj)。解构后obj.prop执行propRef

8. 注意生命周期挂载时机和卸载时清理副作用
9. 同步使用
10. 多个useVue可视为组件间服务（概念）
11. 解决mixin中的问题：

• 数据来源，解构清晰来源
• 命名冲突，解构后可重新赋值
• mixin组合间需要依赖共同参数互相作用，依赖不清晰。使用组合式函数互相传参明确参数需求及函数间组合作用。

12. 对比无渲染组件，无额外开销，性能更好。

• 在纯逻辑复用时使用组合式函数
• 在需要同时复用逻辑和视图布局时使用无渲染组件

指令

1. 自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑
2. 一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数
3. 只有当所需功能只能通过直接的 DOM 操作来实现时，才应该使用自定义指令。其他情况下应该尽可能地使用 v-bind 这样的内置指令来声明式地使用模板，这样更高效，也对服务端渲染更友好。
4. 指令钩子

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5. 除了 el 外，其他参数都是只读的，不要更改它们。
6. 若你需要在不同的钩子间共享信息，推荐通过元素的 dataset attribute 实现。
7. 一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。即只是同个某个指令来操作dom样式。
8. 当在组件上使用自定义指令时，它会始终应用于组件的根节点，和透传 attributes 类似。
9. 不推荐在组件上使用自定义指令

插件

（略）