4.2-响应性

Create by fall on 01 Feb 2023 Recently revised in 01 Feb 2023

响应性

副作用（effect），执行一个函数时，会改变函数外面的一些值，称之为副作用，在这里指函数会修改部分数据状态。

依赖（）当执行一个函数时，所需的数据称之为依赖

订阅者（）比如我们需要在两个数据中的任意一个改变后，更新他们两个的和，需要把求和的方法，在两个数据改变后的回调内执行，这两个数据称之为订阅者（订阅了变化执行的一个方法）。

// 学习 Reflect
const proxy = new Proxy({
  x:10,
  y:20
},{
  get(target, key) {
    return Reflect(target, key)
  },
  set(target, key, value) {
    target[key] = value
    trigger(target)
  }
})

function trigger(obj){
  return obj.x + obj.y
}

调试

组件调试钩子

import { onRenderTracked, onRenderTriggered } from 'vue'
onRenderTracked((event) => { // 哪些依赖正在被使用
  debugger
})
onRenderTriggered((event) => { // 确定哪个依赖正在触发更新
  debugger
})

计算和监听器的钩子

const plusOne = computed(() => count.value + 1, {
  onTrack(e) {
    // 当 count.value 被追踪为依赖时触发
    debugger
  },
  onTrigger(e) {
    // 当 count.value 被更改时触发
    debugger
  }
})

响应性与外部集成

实现不可变数据

import immer from 'immer'
import {shallowRef} from 'vue'
export default useImmer(state){
  const shallow = shallowRef(state)
  const updater = (newVal)=>{
    shallow.value  = immer(shallow.value,newVal)
  }
  return [shallow,updater]
}

状态机

描述一个应用的所有状态，以及从一个状态到另一个状态的所有可能方式