响应式原理

这是一篇关于响应式原理的思维导图，主要内容包括：组件更新和响应式，响应式本质，副作用函数，副作用（Effect），什么是响应式。

响应式原理

• 什么是响应式
  • 页面响应数据的变化而变化
• 副作用（Effect）
  • 什么是副作用
    • 执行一个操作，除了主要的影响，还产生了额外的影响
    • 比如消炎药
      • 消炎止痛是主要的作用
      • 可能导致头晕，是它的副作用
  • 副作用一定是不好的吗？
    • 不一定
    • 比如响应式的场景下，副作用就是积极的
  • 响应式副作用
    • 当响应式数据发生变化时，需要产生的额外操作
      • 触发页面的更新
      • 触发一些监听逻辑
      • ...
    • 这些副作用被封装到函数中，又叫副作用函数
• 副作用函数
  • Vue3的副作用函数有哪些
    • 计算属性 computed
      • 为什么？
      • 因为计算属性有缓存，如果不重新执行会发生缓存一致性问题
    • 渲染函数 render
      • 为什么？
      • 因为render控制组件渲染，数据变，页面变就是响应式的初衷
    • 监听器 watch/watchEffect
      • 为什么？
      • 监听器的语义就是要监听数据的变化
  • 为啥method中方法不是副作用函数
    • 因为不直接影响render和监听器执行
    • 它通过修改响应式数据间接触发render和监听器
• 响应式本质
  • 建立响应式数据跟响应式副作用函数之间的关联
  • 如何建立关联？
    • 怎么知道哪些响应式数据发生了变化？
      • 劫持setter
        • Vue2
          • setter、getter
        • Vue3
          • ref setter、getter reactive Proxy
    • 怎么知道应该通知哪些副作用函数执行
      • 标记 副作用函数执行期间，通过全局变量记录当前执行的副作用函数是什么
      • 劫持 副作用函数执行期间，访问了响应式数据就会被getter劫持
      • 关联 在getter中建立副作用函数和响应式数据的关联
• 组件更新和响应式
  • 父组件如何更新子组件？
  • 通过vDOM
    • 修改props
      • props是响应式的（浅层响应式）
      • 触发计算属性、render、监听器的执行
    • 修改插槽
      • 只会影响子组件的视图部分
    • 调用组件实例暴露的方法