继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

大白T_T
关注TA
已关注
手记 56
粉丝 9
获赞 1

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

主讲老师:张轩

课程内容:

今天学习的内容包括:

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

课程收获:

自定义函数 - hooks

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

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

自定义函数的优点

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

React 和 Vue 的自定义 Hooks

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

Vue3 小结

新特性总结

为什么要有新版本?

  • 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
  • 其他
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP