Vue3设计思想及响应式源码剖析

npm install pnpm -g

pnpm init

packages:  - 'packages/*'

                                    +---------------------+                                    |                     |                                    |  @vue/compiler-sfc  |                                    |                     |                                    +-----+--------+------+                                          |        |                                          v        v                      +---------------------+    +----------------------+                      |                     |    |                      |        +------------>|  @vue/compiler-dom  +--->|  @vue/compiler-core  |        |             |                     |    |                      |   +----+----+        +---------------------+    +----------------------+   |         |   |   vue   |   |         |   +----+----+        +---------------------+    +----------------------+    +-------------------+        |             |                     |    |                      |    |                   |        +------------>|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  |                      |                     |    |                      |    |                   |                      +---------------------+    +----------------------+    +-------------------+

pnpm install @vue/shared@workspace --filter @vue/reactivity

import { isFunction, NOOP } from '@vue/shared' // ts引入会报错const onlyGetter = isFunction(getterOrOptions)  if (onlyGetter) {    ...  } else {    ...  }...

{  "compilerOptions": {    "baseUrl": ".",    "paths": {      "@vue/compat": ["packages/vue-compat/src"],      "@vue/*": ["packages/*/src"],      "vue": ["packages/vue/src"]    }  },}

{  "name": "@vue/reactivity",  "version": "3.2.45",  "main": "index.js",  "module":"dist/reactivity.esm-bundler.js",  "unpkg": "dist/reactivity.global.js",  "buildOptions": {    "name": "VueReactivity",    "formats": [      "esm-bundler",      "cjs",      "global"    ]  }}

{    "name": "@vue/shared",    "version": "3.2.45",    "main": "index.js",    "module": "dist/shared.esm-bundler.js",    "buildOptions": {        "formats": [            "esm-bundler",            "cjs"        ]    }}

"scripts": {    "dev": "node scripts/dev.js reactivity -f global"}

// Using esbuild for faster dev builds.// We are still using Rollup for production builds because it generates// smaller files w/ better tree-shaking.// @ts-checkconst { build } = require('esbuild')const nodePolyfills = require('@esbuild-plugins/node-modules-polyfill')const { resolve, relative } = require('path')const args = require('minimist')(process.argv.slice(2))const target = args._[0] || 'vue'const format = args.f || 'global'const inlineDeps = args.i || args.inlineconst pkg = require(resolve(__dirname, `../packages/${target}/package.json`))// resolve outputconst outputFormat = format.startsWith('global')  ? 'iife'  : format === 'cjs'  ? 'cjs'  : 'esm'const postfix = format.endsWith('-runtime')  ? `runtime.${format.replace(/-runtime$/, '')}`  : formatconst outfile = resolve(  __dirname,  `../packages/${target}/dist/${    target === 'vue-compat' ? `vue` : target  }.${postfix}.js`)const relativeOutfile = relative(process.cwd(), outfile)// resolve externals// TODO this logic is largely duplicated from rollup.config.jslet external = []if (!inlineDeps) {  // cjs & esm-bundler: external all deps  if (format === 'cjs' || format.includes('esm-bundler')) {    external = [      ...external,      ...Object.keys(pkg.dependencies || {}),      ...Object.keys(pkg.peerDependencies || {}),      // for @vue/compiler-sfc / server-renderer      'path',      'url',      'stream'    ]  }  if (target === 'compiler-sfc') {    const consolidateDeps = require.resolve('@vue/consolidate/package.json', {      paths: [resolve(__dirname, `../packages/${target}/`)]    })    external = [      ...external,      ...Object.keys(require(consolidateDeps).devDependencies),      'fs',      'vm',      'crypto',      'react-dom/server',      'teacup/lib/express',      'arc-templates/dist/es5',      'then-pug',      'then-jade'    ]  }}build({  entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],  outfile,  bundle: true,  external,  sourcemap: true,  format: outputFormat,  globalName: pkg.buildOptions?.name,  platform: format === 'cjs' ? 'node' : 'browser',  plugins:    format === 'cjs' || pkg.buildOptions?.enableNonBrowserBranches      ? [nodePolyfills.default()]      : undefined,  define: {    __COMMIT__: `"dev"`,    __VERSION__: `"${pkg.version}"`,    __DEV__: `true`,    __TEST__: `false`,    __BROWSER__: String(      format !== 'cjs' && !pkg.buildOptions?.enableNonBrowserBranches    ),    __GLOBAL__: String(format === 'global'),    __ESM_BUNDLER__: String(format.includes('esm-bundler')),    __ESM_BROWSER__: String(format.includes('esm-browser')),    __NODE_JS__: String(format === 'cjs'),    __SSR__: String(format === 'cjs' || format.includes('esm-bundler')),    __COMPAT__: String(target === 'vue-compat'),    __FEATURE_SUSPENSE__: `true`,    __FEATURE_OPTIONS_API__: `true`,    __FEATURE_PROD_DEVTOOLS__: `false`  },  watch: {    onRebuild(error) {      if (!error) console.log(`rebuilt: ${relativeOutfile}`)    }  }}).then(() => {  console.log(`watching: ${relativeOutfile}`)})

const { effect, reactive } = VueReactivity// console.log(effect, reactive);const state = reactive({name: 'qpp', age:18, address: {city: '南京'}})console.log(state.address);effect(()=>{    console.log(state.name)})

import { mutableHandlers } from'./baseHandlers'; // 代理相关逻辑import{ isObject }from'./util';// 工具方法export function reactive(target: object) {  // if trying to observe a readonly proxy, return the readonly version.  if (isReadonly(target)) {    return target  }  return createReactiveObject(    target,    false,    mutableHandlers,    mutableCollectionHandlers,    reactiveMap  )}function createReactiveObject(target, baseHandler){    if(!isObject(target)){        return target;    }    ...    const observed =new Proxy(target, baseHandler);    return observed}

import { isObject, hasOwn, hasChanged } from"@vue/shared";import { reactive } from"./reactive";const get = createGetter();const set = createSetter();function createGetter(){    return function get(target, key, receiver){        // 对获取的值进行放射        const res = Reflect.get(target, key, receiver);        console.log('属性获取',key)        if(isObject(res)){// 如果获取的值是对象类型，则返回当前对象的代理对象            return reactive(res);        }        return res;    }}function createSetter(){    return function set(target, key, value, receiver){        const oldValue = target[key];        const hadKey =hasOwn(target, key);        const result = Reflect.set(target, key, value, receiver);        if(!hadKey){            console.log('属性新增',key,value)        }else if(hasChanged(value, oldValue)){            console.log('属性值被修改',key,value)        }        return result;    }}export const mutableHandlers ={    get,// 当获取属性时调用此方法    set// 当修改属性时调用此方法}

export let activeEffect = undefined;// 依赖收集的原理是 借助js是单线程的特点， 默认调用effect的时候会去调用proxy的get，此时让属性记住// 依赖的effect，同理也让effect记住对应的属性// 靠的是数据结构 weakMap : {map:{key:new Set()}}// 稍后数据变化的时候 找到对应的map 通过属性出发set中effectfunction cleanEffect(effect) {    // 需要清理effect中存入属性中的set中的effect     // 每次执行前都需要将effect只对应属性的set集合都清理掉    // 属性中的set 依然存放effect    let deps = effect.deps    for (let i = 0; i < deps.length; i++) {        deps[i].delete(effect)    }    effect.deps.length = 0;}// 创建effect时可以传递参数，computed也是基于effect来实现的，只是增加了一些参数条件而已export function effect<T = any>(    fn: () => T,    options?: ReactiveEffectOptions    ){    // 将用户传递的函数编程响应式的effect    const _effect = new ReactiveEffect(fn,options.scheduler);    // 更改runner中的this    _effect.run()    const runner = _effect.run.bind(_effect);    runner.effect = _effect; // 暴露effect的实例    return runner// 用户可以手动调用runner重新执行}export class ReactiveEffect {    public active = true;    public parent = null;    public deps = []; // effect中用了哪些属性，后续清理的时候要使用    constructor(public fn,public scheduler?) { } // 你传递的fn我会帮你放到this上    // effectScope 可以来实现让所有的effect停止    run() {        // 依赖收集  让熟悉和effect 产生关联        if (!this.active) {            return this.fn();        } else {            try {                this.parent = activeEffect                activeEffect = this;                cleanEffect(this); // vue2 和 vue3中都是要清理的                 return this.fn(); // 去proxy对象上取值, 取之的时候 我要让这个熟悉 和当前的effect函数关联起来，稍后数据变化了 ，可以重新执行effect函数            } finally {                // 取消当前正在运行的effect                activeEffect = this.parent;                this.parent = null;            }        }    }    stop() {        if (this.active) {            this.active = false;            cleanEffect(this);        }    }}

effect(()=>{    console.log(state.name)    // 执行用户传入的fn函数，会取到state.name,state.age... 会触发reactive中的getter    app.innerHTML = 'name:' + state.name + 'age:' + state.age + 'address' + state.address.city    })

// 收集属性对应的effectexport function track(target, type, key){}// 触发属性对应effect执行export function trigger(target, type, key){}

function createGetter(){    return function get(target, key, receiver){        const res = Reflect.get(target, key, receiver);        // 取值时依赖收集        track(target, TrackOpTypes.GET, key);        if(isObject(res)){            return reactive(res);        }        return res;    }}

function createSetter(){    return function set(target, key, value, receiver){        const oldValue = target[key];        const hadKey =hasOwn(target, key);        const result = Reflect.set(target, key, value, receiver);        if(!hadKey){            // 设置值时触发更新 - ADD            trigger(target, TriggerOpTypes.ADD, key);        }else if(hasChanged(value, oldValue)){             // 设置值时触发更新 - SET            trigger(target, TriggerOpTypes.SET, key, value, oldValue);        }        return result;    }}

const targetMap = new WeakMap();export function track(target: object, type: TrackOpTypes, key: unknown){    if (shouldTrack && activeEffect) { // 上下文 shouldTrack = true        let depsMap = targetMap.get(target);        if(!depsMap){// 如果没有map，增加map            targetMap.set(target,(depsMap =newMap()));        }        let dep = depsMap.get(key);// 取对应属性的依赖表        if(!dep){// 如果没有则构建set            depsMap.set(key,(dep =newSet()));        }            trackEffects(dep, eventInfo)    }}export function trackEffects(  dep: Dep,  debuggerEventExtraInfo?: DebuggerEventExtraInfo) {  //let shouldTrack = false  //if (effectTrackDepth <= maxMarkerBits) {   // if (!newTracked(dep)) {     // dep.n |= trackOpBit // set newly tracked     // shouldTrack = !wasTracked(dep)    //}  //} else {    // Full cleanup mode.  //  shouldTrack = !dep.has(activeEffect!)  }   if (!dep.has(activeEffect!) {    dep.add(activeEffect!)    activeEffect!.deps.push(dep)    //if (__DEV__ && activeEffect!.onTrack) {    //  activeEffect!.onTrack({    //    effect: activeEffect!,    //    ...debuggerEventExtraInfo!    //  })   // }  }}

export function trigger(target, type, key){    const depsMap = targetMap.get(target);    if(!depsMap){        return;    }    const run=(effects)=>{        if(effects){ effects.forEach(effect=>effect()); }    }    // 有key 就找到对应的key的依赖执行    if(key !==void0){        run(depsMap.get(key));    }    // 数组新增属性    if(type == TriggerOpTypes.ADD){        run(depsMap.get(isArray(target)?'length':'');    }}