手记

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

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

主讲老师:张轩

课程内容:

今天学习的内容包括:

3-6 Vue 副作用处理机制
3-7 Vue 深入了解 watchEffect

课程收获:

副作用

纯函数

  • 相同的输入,永远会得到相同的输出
  • 没有副作用

副作用 跟函数外部环境发生的交互

  • 网络请求
  • DOM 操作
  • 订阅数据来源
  • 写入文件系统
  • 获取用户输入

React 的方式

  • 使用 useEffect 钩子函数添加函数的副作用

Vue3 的方式

  • 使用 watchEffect 钩子函数来添加函数的副作用
  • 任何界面的更新都会触发这个 effect
  • 它会自动追踪在函数体内的变量,只有使用到的值就会自动的触发

深入 watchEffect

  • 自动收集依赖并且触发
  • 自动销毁 effect
  • 使副作用失效
  • 副作用执行顺序
  • React 的执行顺序不可调整,都只在组件 updated 之后触发

Watch 精确控制 effect

  • watch 的基本用法
  • watch reactive 的单个值
  • 使用 toRefs
  • 使用 getter 函数
  • watch 多个值
  • React 的做法
  • 和 watchEffect 对比
    • 懒执行副作用
    • 什么状态应该触发 watcher 重新运行
    • 访问数据变化前后的值
0人推荐
随时随地看视频
慕课网APP