Vue3数据驱动源码解读

时间 2019-11-06

标签 vue3 vue 数据驱动源码解读繁體版

原文原文链接

前言

DEMO地址，先下载DEMO，打开index.html体验一下吧html

阅读的时候最好是先把DEMO过一遍，而后带着问题来看这篇文章，否则可能会一脸懵逼
个人DEMO源码简化了很是很是多的代码，因此功能很基础，为了方便把流程先理清楚
不要死抓住细节不放，有些问题放一放，等把握全局以后就能够理解了
能够下载DEMO源码，打开里面index.html先体验下

灵魂图

先上一张灵魂图，可能看完图就要跑了。。。为了讲清楚画的比较乱vue

整体介绍

从上图中能够大体看出，分为两条线🧵node

第一条线：

new Vue -> reactive[new Proxy -> return proxy] -> baseHandler(set, get) -> effect文件中的依赖收集（track，trigger）-> trigger触发任务调度 -> 完了react

第一条线遗留几个问题：

依赖是何时生成的？
依赖（dom和data之间的关系）是如何造成的？

先保留这两个问题，继续看第二条线git

第二条线

从根路径app开始解析子节点 -> 解析出当前node，node里面的指令{{name}} -> 实例化effect（传入回调函数：回调里面去proxy上面获取name） -> 调用effectgithub

第二条线的重点

调用effect主要作两件事：api

把当前effect push进activeReactiveEffectStack
执行回调，回调函数里面从proxy获取name
【从proxy获取name】这一步会触发proxy的get
get里面从activeReactiveEffectStack获取最后一个依赖，进行依赖收集

源码解析

reactive

import { mutableHandlers } from './baseHandler'

// 这个map存储key: target， value：proxy
// 做用：
//  1.避免重复proxy
const rawToReactive = new WeakMap()
// 这个map存储key：proxy， value：target
// 做用：
//  1.避免proxy对象再次被proxy
const reactiveToRaw = new WeakMap()
export const targetMap = new WeakMap()

export function reactive(target){
    return createReactiveObject(
        target,
        rawToReactive,
        reactiveToRaw,
        mutableHandlers
    )
}

// 建立响应式对象
function createReactiveObject(target, toProxy, toRaw, handlers){
    // 若是当前对象已被proxy，那么直接返回
    let observed = toProxy.get(target)
    if (observed !== void 0) {
        return observed
    }

    // 检测被proxy的对象，即这里的target，自身是不是个proxy，若是是的话，直接返回
    if (toRaw.has(target)) {
        return target
    }

    // 当前的target既没有被proxy，也不是个proxy对象，那么对它proxy
    observed = new Proxy(target, handlers)

    // 实例化以后把它维护到两个map
    toProxy.set(target, observed)
    toRaw.set(observed, target)

    // 把当前的target维护到targetMap，targetMap的做用 -> 【继续往下看，先无论】
    if (!targetMap.has(target)) {
        targetMap.set(target, new Map())
    }
    return observed
}

// toRaw函数，传入proxy对象，获取target
// 
export function toRaw(observed) {
    return reactiveToRaw.get(observed) || observed
}
复制代码

reactive的做用

能够看出reactive的做用主要是：bash

建立proxy实例并返回
维护一个targetMap队列

reactive的遗留问题

targetMap是干吗用的？
handler来自于baseHandler

ok，这两个疑问🤔️先保留，继续看baseHandler的源码app

baseHandler

import { toRaw } from './reactive'
import { track, trigger } from './effect'

// 为了便于理解，这里只作了get和set的proxy
// 其余的代码都是通常的代理，不讲，讲一下track和trigger
// 从vue 2.0的源码其实能够知道：
//  1.get的时候会作依赖收集：即这里的track
//  2.set的时候会作更新广播：即这里的trigger
export const mutableHandlers = {
    get(target, key, receiver){
        const res = Reflect.get(target, key, receiver)
        track(target, 'get', key)
        return res
    },
    set(target, key, value, receiver){
        const oldValue = target[key]
        const result = Reflect.set(target, key, value, receiver)

        // 这里检测key是不是target的自有属性
        const hadKey = target.hasOwnProperty(key)
        // 在reactive维护了一个reactiveToRaw队列，存储了[proxy]:[target]这样的队列，这里检测下是不是使用createReactiveObject新建的proxy
        if (target === toRaw(receiver)) {
            // 判断是否值改变，才触发更新
            if (hadKey && value !== oldValue) {
                trigger(target, 'set', key)
            }
        }
        return result
    }
}
复制代码

baseHandler的做用

get获取值，其次依赖收集
set设置值，其次触发任务调度

baseHandler的遗留问题

什么是依赖？
收集的依赖中，dom和data的关系是怎样的
如何作任务调度？

effect

重点来了，effect就是vue3里面用于依赖管理的，主要是管理三个东西：dom

依赖收集
依赖实例化
依赖存储

import { targetMap } from './reactive'

const activeReactiveEffectStack = []

// 下面这两个api是初始化effect，就不过于纠结了
export function effect(fn, options){
    const effect = createReactiveEffect(fn, options)
    return effect
}

function createReactiveEffect(fn, options){
    const effect = function(){
        if (!activeReactiveEffectStack.includes(effect)) {
            try {
              activeReactiveEffectStack.push(effect)
              return fn()
            } finally {
              activeReactiveEffectStack.pop()
            }
        }
    }
    effect.scheduler = options.scheduler
    return effect
}

// 做用：
// 1.收集依赖
export function track(target, type, key){
    const effect = activeReactiveEffectStack[activeReactiveEffectStack.length - 1]
    // proxy初始化的时候，这个depsMap为new Map
    let depsMap = targetMap.get(target)
    if (depsMap === void 0) {
        targetMap.set(target, (depsMap = new Map()))
    }

    // 若是是第一次这个dep是没有的，由于depsMap是new Map
    let dep = depsMap.get(key)
    if (dep === void 0) {
        // 这里把依赖放进去。依赖是个Set
        depsMap.set(key, (dep = new Set()))
    }
    // 这里的effect就是依赖。
    // 依赖是啥？能够理解为依赖保存了data <-> dom的关系
    dep.add(effect)
    // effect.deps.push(dep)
}

// 做用：
//  1.触发了数据更新，这时候得更新dom了
export function trigger(target, type, key){
    const depsMap = targetMap.get(target)
    const effects = new Set()
    const run = effect => {
        scheduleRun(effect, target, type, key)
    }
    // 解析出依赖中要更新的effect
    addRunners(effects, depsMap.get(key))

    // 任务调度执行
    effects.forEach(run)
}

function addRunners(effects, effectsToAdd){
    effectsToAdd.forEach(effect => {
        effects.add(effect)
    })
}

// 任务调度，就理解为data更新以后，调用effect.scheduler去更新dom
function scheduleRun(effect, target, type, key){
    if (effect.scheduler !== void 0) {
        effect.scheduler(effect)
    } else {
        effect()
    }
}
复制代码

effect重点

依赖收集用到两个东西：activeReactiveEffectStack，targetMap
触发依赖也用到两个：targetMap，scheduler的queueJob

能够看出：1.targetMap是用来存储依赖的

继续看下scheduler的queueJob任务调度

scheduler

import { callWithErrorHandling } from './errorHandling'

const queue = []
const p = Promise.resolve()
let isFlushing = false

export function queueJob(job) {
    if (!queue.includes(job)) {
        queue.push(job)
        if (!isFlushing) {
            nextTick(flushJobs)
        }
    }
}

export function nextTick(fn) {
    return fn ? p.then(fn) : p
}

function flushJobs(seenJobs) {
    isFlushing = true
    let job
    while ((job = queue.shift())) {
        job()
    }
    isFlushing = false
}
复制代码

scheduler queueJob

queueJob主要是利用了Promise来进行一个微任务队列的依赖更新：其实执行effect实例函数

第一条线内容结束语

到这里第一线的内容就完了，遗留一个问题：

在get的时候从activeReactiveEffectStack的最后一个取依赖

这说明啥？
说明在调用了effect -> 把effect push进activeReactiveEffectStack 以后，须要调用proxy[name]来触发get

明白了这一点以后，继续来看第二条线，第二条线的compile内容属于自研，跟源码差距比较大

compile

import { effect } from './effect'
import { queueJob } from './scheduler'

export function compile(el, vm){
    let fragment = document.createDocumentFragment();
    let node;
    
    while(node = el.firstChild){
        compileNode(vm, node)
        fragment.append(node)
    }

    return fragment
}

const reg = /\{\{(.*)\}\}/;
function compileNode(vm, node){
    let { nodeType, nodeValue, nodeName } = node;

    node.update = (type, bindName) => {
        return effect(() => {
            node[type] = vm[bindName]
        }, { scheduler: queueJob })
    }


    let bindName;
    switch(nodeType){
        case 1:
            if(nodeName == 'INPUT'){
                let { attributes } = node;
                for(let attr of attributes){
                    if(attr.name === 'v-model'){
                        bindName = attr.value;
                    }
                }
                if(bindName){
                    node.addEventListener('input', e => {
                        vm[bindName] = e.target.value;
                    })
                }
                node.update('value', bindName)()
            }
            break;
        case 3:
            let isModal = reg.test(nodeValue)
            if(isModal){
                bindName = RegExp.$1 && RegExp.$1.trim();
                node.update('nodeValue', bindName)()
            }
            break;
    }
}
复制代码

compile的重点

重点在于：当解析出node和bingName以后，其实这时候能够调用proxy[name]来直接获取值了

-> 但是这里建立了个effect来创建key和当前node之间的关系

effect的回调是用来调用node['nodeValue'] = proxy['name']来触发get收集依赖的
当set name使name改变以后，查询当前key下面的effect队列，调用各个effect的回调更新dom

写在最后

由于时间比较紧，因此写得很仓促，本身也感受文章写的比较乱，单独看文章的话可能会看不懂。须要先把DEMO过一遍，而后带着问题来看这篇文章