【金秋打卡】第14天 Web前端架构师2022版

课程名称：Web前端架构师2022版

课程章节： 第8周 前端基础技术回顾和巡礼

主讲老师：张轩

课程内容：

今天学习的内容包括：

3-9 第一个自定义hooks 函数
3-10 使用泛型改造自定义函数
3-11 知识小结

课程收获：

自定义函数 - hooks

• 将相关的 feature 组合在一起
• 非常易于重用

界面的需求 - 转化为数据的描述

自定义函数的优点

• 以函数的形式调用，清楚的了解参数和返回的类型
• 避免命名冲突
• 代码逻辑脱离组件存在

React 和 Vue 的自定义 Hooks

• 更新数据的方式
• 响应式对象 vs 函数式编程
• 触发的时机
• 为什么要包裹在 useEffect 中？
• 删除了会有什么问题？
• 为什么 Vue3 不需要这样做也可以？
  

Vue3 小结

新特性总结

https://v3.vuejs.org/guide/migration/introduction.html

为什么要有新版本？

• vue2 的困境 - 抽象逻辑代码的缺失
• Typescript 支持很差

Composition API

• setup
• ref
• reactive 注意丧失响应性
• toRefs
• 生命周期

深入响应式对象原理

• 保存 effect，未来想重新执行的代码 - 压入特定的数据结构
• 探测对象值的改变 - Proxy 对象
• 执行（trigger）之前的 effect - 触发已经保存在数据结构中的 effect 函数

副作用 side-effect

• 纯函数
• 相同的输入，永远会得到相同的输出
• 没有副作用
• 副作用 - 函数外部环境发生的交互
• React 和 Vue 的函数式写法
• watchEffect - 响应式对象改变的时候自动触发
• 自动收集依赖
• 手动销毁副作用
• 使副作用失效
• 副作用执行顺序
• watch - 精确控制 effect

自定义 Hooks

• 将相关的 feature 组合在一起
• 非常易于重用

自定义函数的优点

• 以函数的形式调用，清楚的了解参数和返回的类型
• 避免命名冲突
• 代码逻辑脱离组件存在
• 泛型在函数中的使用
• 和 React 的实现对比

没有讲到可以自学的知识

• Teleport
• Fragment
• Emits Component Options
• Global API 修改
• 语法糖
• script setup
• style vars
• 其他