Vue 3.0回應式系統編程概述-有解無憂

Vue 3.0回應式系統編程概述

- 一、 3.0回應式
- 二、核心方法
- 三、 proxy回顧
- 四、原始碼實作
- - 4.1 reactive（只能轉換物件）
  - 4.2 依賴收集
  - 4.3 effect、 track
  - 4.4 trigger 觸發更新
  - 4.5 ref
  - 4.6 toRefs
  - 4.7 computed
- 五、完整示例代碼

隨著Vue3.0的正式發布,前端又多了一門需要學習的功課，本文主要是對vue3.0回應式系統的簡單剖析及實作：

一、 3.0回應式

使用Proxy物件實作屬性監聽
多層屬性嵌套，在訪問屬性程序中處理下一級屬性
默認監聽動態添加的屬性
默認監聽屬性的洗掉操作
默認監聽陣列索引和length屬性
可以作為單獨的模塊使用

二、核心方法

reactive (將物件轉換為回應式物件)
ref （將基本型別的值轉為具有一個value屬性的回應式物件）
toRefs （解構回應式物件資料）
computed
effect(watch依賴的的底層函式)
track（收集依賴）
trigger （觸發更新）

三、 proxy回顧

1. set和deleteProperty中需要回傳布爾型別的值

'use strict'
// 問題1： set和deleteProperty中需要回傳布爾型別的值
// 嚴格模式下，如果回傳false的話，會出現TypeError的例外
const target = {
  foo: 'xxx',
  bar: 'yyy'
}
// Reflect.getPrototypeOf()
// Object.getPrototypeOf()
const proxy = new Proxy(target, {
  get (target, key, receiver) {
    // return target[key]
    return Reflect.get(target, key, receiver)
  },
  set (target, key, value, receiver) {
    // target[key] = value
    return Reflect.set(target, key, value, receiver) 
    // 這里得寫return 不寫默認回傳undefined
    //Reflect.set執行成功或者失敗會回傳布爾型別的值
  },
  deleteProperty(target, key) {
    // delete target[key]
    return Reflect.deleteProperty(target, key) // 這里得寫return
  }
})

proxy.foo = 'zzz'

2. Proxy和Reflect中使用receiver

Proxy中receiver: Proxy或者繼承Proxy的物件
Reflect中receiver：如果target物件設定了getter，getter中的this指向receiver

執行this.bar的時候，如果第三個引數receiver不傳，getter中this指向obj物件，此時proxy.foo 為undefined
執行this.bar的時候，如果第三個引數receiver傳， this指向代理物件，也就是獲取target.bar, 此時proxy.foo 為value - bar

const obj = {
  get foo () {
    console.log(this)
    return this.bar
  }
}

const proxy = new Proxy(obj, {
  get(target, key, receiver) {
    if (key === 'bar') {
      return 'value - bar'
    }
    // 執行this.bar的時候，如果第三個引數receiver不傳，getter中this指向obj物件，此時proxy.foo 為undefined
    // 執行this.bar的時候，如果第三個引數receiver傳， this指向代理物件，也就是獲取target.bar, 此時proxy.foo 為value - bar
    return Reflect.get(target, key, receiver)
  }
})
console.log(proxy.foo) // value - bar

四、原始碼實作

4.1 reactive（只能轉換物件）

接受一個引數，判斷這個引數是否是物件
創建攔截器物件handler，設定get/set/deleteProperty
回傳Proxy物件

代碼實作：

// 工具方法
const isObject = val => val !==null && typeof val === 'object'
const convert = target => isObject(target) ? reactive(target) : target
const hasOwnproperty = Object.prototype.hasOwnProperty;
const hasOwn = (target, key) => hasOwnproperty.call(target, key)

export function reactive (target) {
    if (!isObject(target)) return target;
    const handler = {
        get (target, key, receiver) {
            //此處收集依賴 - track
            console.log('get', key)
            const result = Reflect.get(target, key, receiver);
            return convert(result)
        },
        set (target, key, value, receiver) {
            let result = true;
            const oldValue = Reflect.get(target, key, receiver)
            if (oldValue !== value) {
                result = Reflect.set(target, key, value, receiver)
                //此處觸發更新 - trigger
                console.log('set', key, value)
            }
            return result
        },
        deleteProperty(target, key) {
            const haskey = hasOwn(target, key)
            const result = Reflect.deleteProperty(target, key)
            if (haskey && result) {
                //此處觸發更新 - trigger
                console.log('delete', key)
            }
            return result
        }
    }

    return new Proxy(target, handler);
}

實際使用：

<body>
  <script type="module">
    import { reactive } from './reactivity/index.js'
    const obj = reactive({
      name: 'zs',
      age: 18
    })
    obj.name = 'lisi'
    delete obj.age
    console.log(obj)
  </script>
</body>

輸出結果：

set name lisi
delete age
Proxy {name: “lisi”}

4.2 依賴收集

weakMap:弱參考，當失去參考會被銷毀

vue3.0中依賴是一個三層的樹形結構，我們會在最外層定義一個new weakMap()的集合targetMap，當我們觸發get時使用track方法收集依賴時首先判斷當前是否存在一個activeEffect物件,不存在直接回傳,存在則首先判斷當前target在targetMap的集合中是否存在，如果不存在就在targetMap的集合中創建對應的集合depsMap,然后判斷當前key在depsMap中是否存在,如果不存在就在depsMap的集合中創建對應的集合dep,將對應的依賴activeEffect收集到對應key值對應的dep集合中，

在這里插入圖片描述

4.3 effect、 track

effect：引數為一個函式（第一次會執行一次），當函式的回應式物件發生改變，就會重新執行一次函式
track: 收集依賴的函式

let activeEffect = null; //當前活動的函式
export function effect(callback) {
    activeEffect = callback; //設定當前活動物件
    callback() //此時會訪問回應式物件的屬性，需要收集依賴
    activeEffect = null;
}
let targetMap = new WeakMap() // 收集依賴的集合

export function track(target, key) { //收集依賴的函式
    if (!activeEffect) return
    let depsMap = targetMap.get(target) //獲取當前依賴集合中target對應的值
    if(!depsMap) { 
        targetMap.set(target, (depsMap = new Map())) //不存在則設定一個target對應的new Map()值
    }
    let dep = depsMap.get(key) //獲取當前依賴集合中target對應的集合中 key屬性對應的值
    if(!dep) {
        depsMap.set(key, (dep = new Set()))//不存在則在depsMap中設定一個key屬性對應的new Set()值
    }
    dep.add(activeEffect) //將當前的活動物件添加到key屬性對應的 Set集合中
}

4.4 trigger 觸發更新

export function trigger(target, key) {//觸發更新
    const depsMap = targetMap.get(target); // 找到target物件對應的集合
    if (!depsMap) return;
    const dep = depsMap.get(key) //找到key對應的dep集合
    if(dep) {//執行每個依賴于key（回應式物件的值）值函式
        dep.forEach(effect => effect())
    }
}

4.5 ref

可以接受物件或者基礎型別，如果是回應式物件直接回傳，是物件則內部會呼叫reactive將其轉換為回應式物件，如果是普通的值則轉為具有一個value屬性的回應式物件

export function ref(raw) {
  // 判斷raw是否是ref創建的物件，如果是的話直接回傳
  if (isObject(raw) && raw.__v_isRef)return

  let value = convert(raw)
  const r = {
    __v_isRef: true, //特殊標識
    get value () {
      track(r, 'value') //收集依賴
      return value
    },
    set value (newValue) {
      if(newValue !== value) {
        raw = newValue
        value = convert(raw) //將得到的新值設定為回應式物件
        trigger(r, 'value') // 觸發更新
      }
    }
  }
  return r
}

以上我們可以知道 reactive vs ref

ref可以把基本資料型別資料轉換成回應式物件
ref回傳的物件，重新賦值成物件也是回應式的
reactive回傳的物件，重新賦值丟失回應式
reactive回傳的物件不可解構

reactive

const product = reactive({
  name: 'iPhone',
  price: 5000,
  count: 3
})

ref

const price = ref(5000)
const count = ref(3)

4.6 toRefs

傳入的物件必須是reactive回傳的回應式物件（proxy物件）然后將傳入物件的屬性轉換為類似ref回傳的物件然后將屬性掛載在一個新的物件上回傳，如果不是回應式物件（proxy物件）直接回傳.


export function toRefs (proxy) {
  //如果是陣列我們創建一個新的陣列 否則回傳空物件
  const ret = proxy instanceof Array ? new Array(proxy.length) : {}

  for (const key in proxy) {
      // 將每一項轉換為類似ref的物件
    ret[key] = toProxyRef(proxy, key)
  }

  return ret
}

function toProxyRef (proxy, key) {
  const r = {
    __v_isRef: true,
    get value () {
      return proxy[key]//這里不收集依賴是因為proxy是回應式物件，當我們訪問回應式物件屬性會觸發get方法自動收集依賴
    },
    set value (newValue) {
      proxy[key] = newValue//這里不需要觸發更新是因為proxy是回應式物件，當我們重新賦值會觸發回應式物件的set方法觸發更新
    }
  }
  return r
}

4.7 computed

接受一個有回傳值的函式作為引數,回傳的值就是計算屬性的值并且會監聽函式中的回應式資料的變化


  export function computed (getter) {
  const result = ref()

  effect(() => (result.value = getter()))

 	 	return result
  }

五、完整示例代碼

https://gitee.com/liannian9/fed-e-task-03-05/tree/master/code/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/01-reactivity

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/136872.html

標籤：區塊鏈

上一篇：詳細教學vue子組件和祖父組件的通訊

下一篇：在Vue里如何把資料匯出到Excel ？

Vue 3.0回應式系統編程概述