?????? 前言： 今天想和大家分享一下計(jì)算屬性 computed畅姊，使用過(guò)的童鞋 大致都了解 computed 會(huì)緩存鸵钝，并且在其依賴的響應(yīng)式數(shù)據(jù)發(fā)生變化的時(shí)候進(jìn)行重新計(jì)算更新數(shù)據(jù)疏哗，那為什么 computed 會(huì)進(jìn)行緩存呢呛讲，內(nèi)部又是怎么實(shí)現(xiàn)的呢禾怠，下面我們來(lái)一起一探究竟??????

一、構(gòu)建基礎(chǔ)列表

大致目錄結(jié)構(gòu)

---| packages
---|---| reactivity // 響應(yīng)性模塊
---|---|---| src
---|---|---|---| index.ts 出口文件
---|---|---|---| ref.ts
---|---|---|---| reactive.ts
---|---|---|---| computed.ts
---|---|---|---| effect.ts
---|---|---|---| dep.ts
---|---|---|---| baseHandlers.ts
---|---| shared // 公共方法模塊
---|---|---| src
---|---|---|---| index.ts 出口文件
---|---|---|---| shapeFlags.ts
---|---| vue // 打包贝搁、測(cè)試實(shí)例吗氏、項(xiàng)目整體入口模塊
---|---|---| dist
---|---|---| examples
---|---|---| src
---|---|---|---| index.ts 出口文件

二、開(kāi)整

computed 目標(biāo)：構(gòu)建 computed 函數(shù)雷逆，分析為什么 computed 會(huì)進(jìn)行數(shù)據(jù)緩存弦讽，什么場(chǎng)景適用 computed？

1. 創(chuàng)建 packages/reactivity/src/computed.ts 模塊

import { isFunction } from '@vue/shared'
import { Dep } from './dep'
import { ReactiveEffect } from './effect'
import { trackRefValue, triggerRefValue } from './ref'

/**
* 計(jì)算屬性
*/
export function computed(getterOrOptions) {
  let getter
  // 判斷傳入的參數(shù)是否為一個(gè)函數(shù)
  const onlyGetter = isFunction(getterOrOptions)
  
  // 如果：為函數(shù)膀哲， 則： 賦值給 getter
  if(onlyGetter) {
    getter = getterOrOptions
  }
  // new 一個(gè)計(jì)算屬性
  const cRef = new ComputedRefImpl(getter)
  return cRef as any
}

/**
* 計(jì)算屬性類
*/
export class ComputedRefImpl<T> {
 public dep?: Dep = undefined // 引用當(dāng)前 computed 的 effect 的 set
 public readonly effect: ReactiveEffect<T> // effect 對(duì)象
 public readonly __v_isRef = true // ref標(biāo)識(shí)
 
 private _value!: T // 緩存值
 
 constructor(getter) {
   this.effect = new ReactiveEffect(getter)
   // effect 實(shí)例 被掛載了一個(gè)新的屬性 computed 為當(dāng)前的 ComputedRefImpl 的實(shí)例
   this.effect.computed = this
 }
 
 /**
 * get value 在ref 中 似曾相識(shí)的 操作
 */
 get value() {
   // 依賴收集 （this 本質(zhì)上就是 ComputedRefImpl 的實(shí)例）
   trackRefValue(this)
   // 執(zhí)行 run 函數(shù)
   this._value = this.effect.run()!
   // 返回計(jì)算之后的真實(shí)值
   return this._value
   
 }
}

packages/shared/src/index.ts 增加 isFunction 工具類

/**
* 判斷是否是一個(gè) function
*/
export function isFunction = (val: unknown): val is Function => typeof val === 'function'

packages/reactivity/src/effect.ts 增加 computed 屬性

/**
* 響應(yīng)數(shù)據(jù)觸發(fā)依賴時(shí)的執(zhí)行類
*/
export class ReactiveEffect<T = any> {
  // 存在該屬性往产，則表示當(dāng)前 effect 為計(jì)算屬性的 effect
  computed?: ComputedRefImpl<T>
  ...
}

至此，我們已經(jīng)通過(guò) get value() 完成了依賴收集某宪，下面我們來(lái)完善一下依賴觸發(fā)操作

2. packages/reactivity/src/computed.ts 模塊 關(guān)于臟狀態(tài) _dirty 和調(diào)度器 scheduler

在依賴觸發(fā)模塊仿村，我們需要先了解一下臟狀態(tài)和調(diào)度器大致指的是什么，作用是什么兴喂，下面是簡(jiǎn)單的介紹蔼囊。

• 臟狀態(tài)（_dirty）即是數(shù)據(jù)臟了，是控制緩存的終極幕后衣迷，具體怎么控制畏鼓，下面通過(guò)代碼描述

  • false 使用緩存值，免于計(jì)算
  • true 觸發(fā)run方法更新數(shù)據(jù)壶谒，重新計(jì)算

• 調(diào)度器（scheduler）簡(jiǎn)單描述是回調(diào)函數(shù) fn云矫，在當(dāng)前computed上下文中，只要 effect 中存在 scheduler佃迄，就會(huì)執(zhí)行該函數(shù)泼差。

export class ComputedRefImpl<T> {
  public _dirty = true // 臟狀態(tài)
  
  constructor(getter) {
    this.effect = new ReactiveEffect(getter, () => {
      // 判斷當(dāng)前臟數(shù)據(jù)的狀態(tài)，false：觸發(fā)依賴
      if(!this._dirty) {
       // 將臟數(shù)據(jù)改為 true
       this._dirty = true
       // 觸發(fā)依賴
       triggerRefValue(this)
      }
    })
    this.effect.computed = this
   }
 }

 get value() {
   // 收集依賴
   trackRefValue(this)
   // 判斷當(dāng)前臟數(shù)據(jù)的狀態(tài)呵俏，_dirty: true堆缘，表示需要重新執(zhí)行 run，獲取最新數(shù)據(jù)
   if(this._dirty) {
     this._dirty = false
     // 執(zhí)行 run 函數(shù)
     this._value = this.effect.run()普碎！
   }
   // 返回計(jì)算后的數(shù)據(jù)
   return this._value
 }
}

packages/reactivity/src/effect.ts 新增調(diào)度器相關(guān)內(nèi)容

export type EffectScheduler = (...args:any[]) => any


/**
* 響應(yīng)數(shù)據(jù)觸發(fā)依賴時(shí)的執(zhí)行類
*/
export class ReactiveEffect<T = any> {
  // 存在該屬性吼肥，則表示當(dāng)前 effect 為計(jì)算屬性的 effect
  computed?: ComputedRefImpl<T>
  
  constructor(
   public fn: () => T,
   public scheduler: EffectScheduler | null = null
  ){}
  ...
}


/**
* 觸發(fā)指定依賴
*/
export function triggerEffect(effect: ReactiveEffect) {
 // 存在調(diào)度器則執(zhí)行調(diào)度函數(shù)
 if(effect.scheduler) {
   effect.scheduler()
 }
 // 否則直接執(zhí)行 run 函數(shù)
 else {
  effect.run()
 }
}

至此，我們的computed的五臟六腑已都實(shí)現(xiàn)麻车，下面來(lái)小試牛刀一下缀皱，看看是否可以正常運(yùn)行??

3. 創(chuàng)建 packages/vue/examples/reactivity/computed.html

<body>
  <div id="app"></div>
  <script>
    const { reactive, effect, computed } = Vue
    const obj = reactive({
     name: '張三'
    })
    const computedObj = computed(() => {
      return '姓名：' + obj.name
    })
    effect(() => {
      // 校驗(yàn)：多次觸發(fā)，computed由于緩存原因應(yīng)該只會(huì)計(jì)算一次
      document.querySelector('#app').innerHTML = computedObj.value
      document.querySelector('#app').innerHTML = computedObj.value
    })
    
    setTimeout(() => {
      obj.name = '李四'
    }, 2000)
  </script>
</body>

運(yùn)行一下以上實(shí)例动猬，computed是否真的會(huì)只進(jìn)行一次計(jì)算呢啤斗？還是會(huì)出其他的狀況呢，各位看官赁咙，下回我們?cè)偌?xì)細(xì)道來(lái)~~~~

學(xué)習(xí)使我快樂(lè).mmp