前言

最容易搭建 vue3 的方式就是使用作者的 vite《ntent="mp" href="https://www.toutiao.com/i6832604684847415811/?group_id=6832604684847415811" rel="noopener noreferrer" target="_blank">一个由 Vue 作者尤雨溪开发的 web 开发工具—vite》

也可以通过 yarn 安装

  $ yarn create vite-app <project-name>  $ cd <project-name>  $ yarn  $ yarn dev

异常1：本菜翻阅了 vite 的 issue，然后 google + baidu 一无所获，最后发现是因为本菜 node 版本为 13.5.0导致的（版本过高），

最后的解决方式是：本菜通过 nvm 将 node 版本切换到 12.12.0，至于 nvm 没使用过的童鞋们可以去尝试下哦。特别好用

vite 原理解析

那么就可以通过通过拦截路由 / 和 .js 结尾的请求。然后通过 node 去加载对应的 .js 文件

    const fs = require('fs')    const path = require('path')    const Koa = require('koa')    const app = new Koa()    app.use(async ctx=>{        const {request:{url} } = ctx        // 首页        if(url=='/'){n            ctx.type="text/html"            ctx.body = fs.readFileSync('./index.html','utf-8')        }else if(url.endsWith('.js')){            // js文件            const p = path.resolve(__dirname,url.slice(1))            ctx.type = 'application/javascript'            const content = fs.readFileSync(p,'utf-8')            ctx.body = content        }    })    app.listen(3001, ()=>{        console.log('听我口令，3001端口，起~~')    })

但是遇到第三方库以上代码就会找不到 .js 文件的位置了，此时 vite 会用 es-module-lexer 把文件解析成 ast，拿到 import 的地址。

如果是第三方库就去 node_modules 中查找，vite 中通过在第三方库中添加前缀 /@modules/，然后发现了 /@modules/ 后走第三方库逻辑

    if(url.startsWith('/@modules/')){        // 这是一个node_module里的东西        const prefix = path.resolve(__dirname,'node_modules',url.replace('/@modules/',''))        const module = require(prefix+'/package.json').module        const p = path.resolve(prefix,module)        const ret = fs.readFileSync(p,'utf-8')        ctx.type = 'application/javascript'        ctx.body = rewriteimport(ret)    }

首先 xx.vue 返回的格式大概是这样的

const __script = {    setup() {        ...    }}import {render as __render} from "/src/App.vue?type=template&t=1592389791757"__script.render = __renderexport default __script

解析 .css 就更加简单了。通过 document.createElement('style')然后再注入就好了

reactive

作为 vue2 的使用者最想知道的肯定是 vue3 的数据劫持和双向绑定了。在 vue3中，双向绑定和可选项，如果需要使用双向绑定的需要通过 reactive方法进万数据劫持。

现在开始写一个简单的 vue

  <template>    <div>      <div>{{ count }}</div>      <button @click="increment">count++</button>    </div>  </template>  <script>    import { reactive } from 'vue'    export default {      setup() {        let count = reactive({          num: 0        })        const increment = () => count.num++        return {          count,          increment        }      }    }  </script>

现在开始解读 reactive 源码。

上面的 __v_isReadonly 其实是一个 typescript 的枚举值

export const enum ReactiveFlags {  skip = '__v_skip',  isReactive = '__v_isReactive',  isReadonly = '__v_isReadonly',  raw = '__v_raw',  reactive = '__v_reactive',  readonly = '__v_readonly'}

然后进入 createReactiveObject 在 649 行，意思就是：「创建响应式对象」

function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers) {    // 略...        // 如果target已经代理了, 返回target    if (target.__v_raw && !(isReadonly && target.__v_isReactive)) {        return target;    }    // target already has corresponding Proxy    if (hasOwn(target, isReadonly ? "__v_readonly"  : "__v_reactive" )) {        return isReadonly ? target.__v_readonly : target.__v_reactive;    }        if (!canObserve(target)) {        return target;    }    // 重点...    // collectionHandlers：对引用类型的劫持,    // baseHandlers: 对进行基本类型的劫持    const observed = new Proxy(target, collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers);    def(target, isReadonly ? "__v_readonly"  : "__v_reactive" , observed);    return observed;}

实现劫持的主要方法是通过 Proxy 方法，（Proxy 使用可以看看阮老师的博客），顺藤摸瓜找到 mutableHandlers 定义的地方。在 338 行

const mutableHandlers = {    get,    set,    deleteProperty,    has,    ownKeys};// 229行const get =  createGetter();// 251 行function createGetter(isReadonly = false, shallow = false) {    return function get(target, key, receiver) {        // 一些 __v_isReactive、__v_isReadonly、__v_raw的处理        // 略...        // 数组操作        const targetIsArray = isArray(target);        if (targetIsArray && hasOwn(arrayInstrumentations, key)) {            return Reflect.get(arrayInstrumentations, key, receiver);        }        // 非数组        const res = Reflect.get(target, key, receiver);                // 其他 调用 track 返回 res 的情况        // 略...                // 如果可写，那么会调用 track        !isReadonly && track(target, "get" , key);        // 如果是对象呢。那么递归        return isObject(res)            ? isReadonly                ? // need to lazy access readonly and reactive here to avoid                    // circular dependency                    readonly(res)                : reactive(res)            : res;    };}

get 指向了方法 createGetter, 「创建 get 劫持」

那么数组的 arrayInstrumentations 是什么呢？我们来到源码的第 234 行。

const arrayInstrumentations = {};['includes', 'indexOf', 'lastIndexOf'].forEach(key => {    arrayInstrumentations[key] = function (...args) {        //         const arr = toRaw(this);        for (let i = 0, l = this.length; i < l; i++) {            track(arr, "get" , i + '');        }        // we run the method using the original args first (which may be reactive)        // 我们首先 以原始args 运行该方法（可能是反应性的）        const res = arr[key](...args);        if (res === -1 || res === false) {            // if that didn't work, run it again using raw values.            // 如果那不起作用，则使用原始值再次运行它。            return arr[key](...args.map(toRaw));        }        else {            return res;        }    };});

arrayInstrumentations 中还是调用了 track 方法，那么 track 方法就更加神秘了。来看看它的源码吧？源码在 126 行

function track(target, type, key) {    if (!shouldTrack || activeEffect === undefined) {        return;    }    let depsMap = targetMap.get(target);    if (!depsMap) {        targetMap.set(target, (depsMap = new Map()));    }    let dep = depsMap.get(key);    if (!dep) {        depsMap.set(key, (dep = new Set()));    }    if (!dep.has(activeEffect)) {        dep.add(activeEffect);        activeEffect.deps.push(dep);        if ( activeEffect.options.onTrack) {            activeEffect.options.onTrack({                effect: activeEffect,                target,                type,                key            });        }    }}

在不考虑 activeEffect 的情况下。track 所做的事情就是

创建包含自身的 map
将 activeEffect 赛道 map 中
触发 onTrack

createReactiveEffect 是在 effect 中被调用的

先开始讲述 trigget 相关的代码（核心哦）

function trigger(target, type, key, extraInfo) {    const depsMap = targetMap.get(target);        // 略...    const effects = new Set();    const computedRunners = new Set();    if (type === "clear" ) {      // collection being cleared, trigger all effects for target      depsMap.forEach(dep => {        addRunners(effects, computedRunners, dep);      });    }    // 略...     const run = (effect) => {      scheduleRun(effect, target, type, key, extraInfo);    };        computedRunners.forEach(run);    effects.forEach(run);  }

在源码 3900 行中，被 mutableHandlers、readonlyHandlers 等函数中被使用。

所以，这里就成环了。