浅析Vue3响应式原理

2021/10/29 23:11:06

本文主要是介绍浅析Vue3响应式原理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

  Vue3中响应式模块是如何工作的呢?比如三个属性:价格price,数量quantity ,总价格total 。

let price = 5
let quantity = 2
let total = price * quantity

  我们想要做到响应式,即更新 price 时,网页上的 price 随之更新,而计算后的 total 也随之更新。定义一个计算函数:

function getTotal (price, quantity){
  let total = price * quantity 
}

  我们想要在更新了price 后,再次执行这个 getTotal 函数,这样就能得到一个响应式的 total。那么 vue3 中是如何实现这个流程的呢?

  在 Vue3 中,使用了多种数据结构来执行整个机制,例如:

  • 定义 track 用于保存这段函数代码。
  • 定义 effect 用于执行代码。
  • 定义 trigger 用于执行所有存储的代码。

  首先,将上面的 getTotal 用匿名函数的方式写入 effect:

let effect = () => {
    total = price * quantity
}

  用一个集合 dep 来保存所有的 effect

let dep = new Set()

  track 作为函数,往集合dep 里添加effect :

function track() {
    dep.add(effct)
}

  trigger 作为函数,作用是遍历 dep 中所有 effect ,并逐一执行。

function trigger() {
    dep.forEach( effct => effct() )
}

一、单个响应式对象

  通常来说,一个对象有多个 property,例如上面提到的price和quantity。

let product = { price : 5, quantity : 2  }

  我们想让每个 property 都拥有自己的 dep ,这样无论修改哪个属性,total 都可以变得“响应式”。

  可以定义一个 dep map (ES6 map), map 的 key 是属性的名字,比如 price 或者 quantity 。map 的 value 是一个 dep ,即一个 effect 集合。

  track 函数和 trigger 函数需要改写成:

const depMap = new Map()
function track(key) {
    let dep = depMap.get(key)   // 获取property的dep
    if(!dep) {
        depMap.set(key, (dep = new Set()))   //如果不存在dep,则创建一个
    }
    dep.add(effect)   // 往集合中添加effect
}
function trigger(key) {
    let dep = depMap.get(key)   // 获取property的dep
    if(dep) {                
        dep.forEach(effect => {   // dep存在,则遍历dep中的所有effect
            effect()
        })
    }
}

  现在汇总所有的代码,让我们看看响应式是否生效

let product = { price : 5, quantity : 2 }
let total = 0
let effect = () => {
    total = product.price * product.quantity
}
const depMap = new Map()
function track(key) {
    let dep = depMap.get(key)   // 获取property的dep
    if(!dep) {
        depMap.set(key, (dep = new Set()))   //如果不存在dep,则创建一个
    }
    dep.add(effect)   // 往集合中添加effect
}
function trigger(key) {
    let dep = depMap.get(key)   // 获取property的dep
    if(dep) {                
        dep.forEach(effect => {   // dep存在,则遍历dep中的所有effect
            effect()
        })
    }
}
track('quantity')
effect()
console.log(total)   //10

product.quantity = 3
trigger('quantity')
console.log(total)    //15

  复制这段代码到控制台,测试运行结果。现在我们就得到了一个响应式的对象product了,修改product 的任何属性,只要调用以上方法,total都会发生变化。

二、多个响应式对象

  但上述代码中的depMap只是存放了单个对象product的属性及dep,如果现在我们需要多个响应式的对象呢?比如一个user对象:

let user = {
    name : 'LUJT',
    age  : 19
}

  既然一个depMap只能处理一个响应式对象,如果存在多个对象,一种显而易见的思路是,再定义一个Map,key为某个对象,value为一个depMap。在此处我们使用WeakMap。MDN中关于WeakMap的定义是:WeakMap 对象是一组键/值对的集合,其中的键是弱引用的。其键必须是对象,而值可以是任意的。

  非常符合我们的需要!因此我们定义一个WeakMap如下:

const targetMap = new WeakMap

  我们的核心代码可以改写为:

const targetMap = new WeakMap   //targetMap用于保存对象及其depMap
function track(target, key) {
    let depMap = targetMap.get(target)   // 获取对象的depMap
       if(!depMap) {
        targetMap.set(target, (depMap = new Map()))   //如果不存在depMap,则创建一个
    }
    let dep = depMap.get(key)   // 获取property的dep
    
    if(!dep) {
        depMap.set(key, (dep = new Set()))   //如果不存在dep,则创建一个
    }
    
    dep.add(effect)   // 往集合中添加effect
}
function trigger(target, key) {
    const depMap = targetMap.get(target)
    if(!depMap){return}
    
    let dep = depMap.get(key)   // 获取property的dep
    if(dep) {                
        dep.forEach(effect => {   // dep存在,则遍历dep中的所有effect
            effect()
        })
    }
}

  如此,我们设置多个对象的响应式工作就完成了。

  Vue3 用 effect 函数存放动态变化的执行条件,用dep集合存储多个effect,用depMap存储对象的属性和dep,用targetMap存放对象和depMap。



这篇关于浅析Vue3响应式原理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程