有关Vue源码的简单实现实现一个属于自己的minvue

核心流程

vue的核心流程&＃xff1a;

1. 创造响应式数据

2. 模板编译 生成 ast

3. ast 转为render函数 后续每次数据更新 只执行render函数(不需要再次进行ast的转换)

4. render函数执行 生成 vNode节点&＃xff08;会使用到响应式数据&＃xff09;

5. 根据vNode 生成 真实dom 渲染页面

6. 数据更新 重新执行render

数据劫持

Vue2中使用的是Object.definedProperty&＃xff0c;Vue3中直接使用Proxy了

模板编译为ast

vue2中使用的是正则表达式进行匹配&＃xff0c;然后转换为ast树。

模板引擎 性能差 需要正则匹配 替换 vue1.0 没有引入虚拟dom的改变&＃xff0c;vue2 采用虚拟dom 数据变化后比较虚拟dom的差异 最后更新需要更新的地方&＃xff0c; 核心就是我们需要将模板变成我们的js语法 通过js语法生成虚拟dom&＃xff0c;语法之间的转换 需要先变成抽象语法树AST 再组装为新的语法&＃xff0c;这里就是把template语法转为render函数。

ast转render

把生成的ast语法树&＃xff0c;通过字符串拼接等方式转为render函数。render函数内部主要用到&＃xff1a;

1. _c函数&＃xff1a;创建元素虚拟dom节点

2. _v函数&＃xff1a;创建文本虚拟dom节点

3. _s函数&＃xff1a;将函数内的变量字符串化

render函数生成真实dom

调用render函数&＃xff0c;会生成虚拟dom&＃xff0c;然后把虚拟dom转为真实DOM&＃xff0c;挂载到页面即可。

回忆流程

核心流程&＃xff1a;

1. 数据处理成响应式&＃xff0c;在 initState中处理的&＃xff08;针对对象来说主要是definedProperty&＃xff0c;数组则是重写七个方法&＃xff09;

2. 模板编译&＃xff1a;先把模板转成ast语法树&＃xff0c;再把语法树生成render函数

3. 调用render函数&＃xff0c;可能会进行变量的取值操作(_s函数内有变量)&＃xff0c;产生对应的虚拟dom

4. 虚拟dom渲染为真实dom&＃xff0c;挂载到页面即可

完成了&＃xff0c;虚拟和真实dom的渲染&＃xff0c;也完成了响应式数据的处理&＃xff0c;接下来需要进行视图和响应式数据的关联&＃xff0c;在渲染页面的时候&＃xff0c;收集依赖数据。

1. 使用观察者模式实现依赖收集

2. 异步更新策略

3. mixin的实现原理

模板的依赖收集

要完成依赖的收集&＃xff0c;很明显的就是&＃xff0c;我们要如何得知&＃xff0c;此模板在此次渲染的时候&＃xff0c;用到了那些响应式数据。

我们可以给模板中的属性&＃xff0c;增加一个收集器&＃xff08;dep&＃xff09;。这个收集器&＃xff0c;是给每个属性单独增加的。页面渲染的时候&＃xff0c;我们把渲染逻辑封装到watcher中。&＃xff08;其实就是手动更新视图的那两个方法app._update(app._render())&＃xff09;。让dep记住这个watcher即可&＃xff0c;在属性变化了以后&＃xff0c;可以找到对应的dep中存放的watcher&＃xff0c;然后执行重新渲染页面。

这里面我们用到的方式其实就是观察者模式。

/*** watcher 进行实际的视图渲染* 每个组件都有自己的watcher&＃xff0c;可以减少每次更新页面的部分* 给每个属性都增加一个dep&＃xff0c;目的就是收集watcher* 一个视图&＃xff08;组件&＃xff09;可能有很多属性&＃xff0c;多个属性对应一个视图 n个dep对应1个watcher* 一个属性也可能对应多个视图&＃xff08;组件&＃xff09;* 所以 dep 和 watcher 是多对多关系* * 每个属性都有自己的dep&＃xff0c;属性就是被观察者* watcher就是观察者&＃xff08;属性变化了会通知观察者进行视图更新&＃xff09;-> 观察者模式*/
class Watcher{}


先让watcher收集dep&＃xff0c;如果dep已经收集过&＃xff0c;则不会再次收集。当dep被收集的时候&＃xff0c;我们也会让dep反向收集当前的watcher。实现二者的双向收集。

然后在响应式数据发送改变的时候&＃xff0c;通知dep的观察者&＃xff08;watcher&＃xff09;进行视图更新。

视图同步渲染

此时&＃xff0c;已经完成了响应式数据和视图的绑定&＃xff0c;在数据发生改变的情况下&＃xff0c;视图会同步更新。也就是说&＃xff0c;我们更新了两次响应式数据&＃xff0c;也会更新两次视图。

正常情况下&＃xff0c;更新两次视图是没有问题的&＃xff0c;但是此时两次数据的更新发生在一次同步代码中&＃xff0c;我们应该让视图的更新是异步的&＃xff0c;这样在一次操作更新多个数据的情况下&＃xff0c;也只会渲染一次视图&＃xff0c;提高渲染速率。

那么我们的想法就是合并更新&＃xff0c;在所有的更新数据做完以后&＃xff0c;在刷新页面。也就是批处理&＃xff0c;事件环。

事件环

我们的期望就是&＃xff0c;同步代码执行完毕之后&＃xff0c;在执行视图的渲染&＃xff08;作为异步任务&＃xff09;。把更新操作延迟。

方法就是使用一个队列维护需要更新的watcher&＃xff0c;第一次更新属性值的时候&＃xff0c;就开启一个定时器&＃xff0c;清空所有的watcher。后续的数据改变的操作&＃xff0c;都不会再次开启定时器&＃xff0c;只是会把需要更新的watcher再次入队列。&＃xff08;当然watcher我们会先去重&＃xff09;。

但是这个清空操作是在同步代码执行完毕后才会执行的。

// watcher queue 本次需要更新的视图队列
let queue &＃61; [];
// watcher 去重  {0:true,1:true}
let has &＃61; {};
// 批处理 也可以说是防抖
let pending &＃61; false;
/*** 不管执行多少次update操作&＃xff0c;但是我们最终只执行一轮刷新操作* &＃64;param {*} watcher*/
function queueWatcher(watcher) {const id &＃61; watcher.id;// 去重if (!has[id]) {queue.push(watcher);has[id] &＃61; true;console.log(queue);if (!pending) {// 刷新队列 多个属性刷新 其实执行的只是第一次 合并刷新了setTimeout(flushSchedulerQueue, 0);pending &＃61; true;}}
}
/*** 刷新调度队列 且清理当前的标识 has pending 等都重置* 先执行第一批的watcher&＃xff0c;如果刷新过程中有新的watcher产生&＃xff0c;再次加入队列即可*/
function flushSchedulerQueue() {const flushQueue &＃61; [...queue];queue &＃61; [];has &＃61; {};pending &＃61; false;// 刷新视图 如果在刷新过程中 还有新的watcher 会重新放到queueWatcher中flushQueue.forEach((watcher) &＃61;> watcher.run()); // run 就是执行render
}


nextTick

原理&＃xff1a;

因为我们数据的更新和视图的更新不再是同步&＃xff0c;导致我们在同步获取视图最新的dom元素时&＃xff0c;可能出现获取的元素和视图实际显示的元素不一致的情况。于是出现了 nextTick方法

实际上&＃xff1a;nextTick方法内部也是维护了一个异步回调队列&＃xff0c;开启一个定时器&＃xff0c;每次调用该方法传入回调&＃xff0c;都是把回调函数放入队列&＃xff0c;并不是每次调用nextTick方法都开启一个定时器&＃xff08;比较销毁性能&＃xff09;。再放入第一个回调函数的时候&＃xff0c;开启定时器&＃xff0c;后续的回调函数只放入队列而不会再次开启定时器了&＃xff0c;。所以nextTick不是创建了异步任务&＃xff0c;而是将这个任务维护到了队列而已。

nextTick方法是同步还是异步&＃xff1f;

把任务&＃xff08;回调&＃xff09;放到队列是同步&＃xff0c;实际执行任务是异步。

// 任务队列
let callbacks &＃61; [];
// 是否等待任务刷新
let waiting &＃61; false;
/*** 刷新异步回调函数队列*/
function flushCallbacks() {const cbs &＃61; [...callbacks];callbacks &＃61; [];waiting &＃61; false;cbs.forEach((cb) &＃61;> cb());
}
/*** 异步批处理* 是先执行内部的回调 还是用户的&＃xff1f; 用个队列 排序* &＃64;param {Function} cb 回调函数*/
export function nextTick(cb) {// 使用队列维护nextTick中的callback方法callbacks.push(cb);if (!waiting) {setTimeout(flushCallbacks, 0); // 刷新waiting &＃61; true;}
}


vue的nextTick

实际上&＃xff0c;vue的nextTick方法&＃xff0c;内部并没有直接使用原生的某一个异步api&＃xff08;比如promise&＃xff0c;setTimeout等&＃xff09;。而是采用优雅降级的方法。

1. 内部先采用的是promise&＃xff08;ie不兼容&＃xff09;。

2. 有一个和Promise等价的 MutationObserve^[2]。也是异步微任务。&＃xff08;此API是H5的&＃xff0c;只能在浏览器中使用&＃xff09;

3. 考虑ie浏览器专享的 setImmediate API。性能比settimeout好一些

4. 最后直接上setTimeout

**采用优雅降级的目的&＃xff0c;**还是为了用户可以尽快看见页面的渲染。

/*** 优雅降级  Promise -> MutationObserve -> setImmediate -> setTimeout(需要开线程 开销最大)*/
let timerFunc &＃61; null;
if (Promise) {timerFunc &＃61; () &＃61;> Promise.resolve().then(flushCallbacks);
} else if (MutationObserver) {// 创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用&＃xff08;异步执行callback&＃xff09;。const observer &＃61; new MutationObserver(flushCallbacks);// TODO 创建文本节点的API 应该封装 为了方便跨平台const textNode &＃61; document.createTextNode(1);console.log("observer-----------------")// 监控文本值的变化observer.observe(textNode, {characterData: true,});timerFunc &＃61; () &＃61;> (textNode.textContent &＃61; 2);
} else if (setImmediate) {// IE平台timerFunc &＃61; () &＃61;> setImmediate(flushCallbacks);
} else {timerFunc &＃61; () &＃61;> setTimeout(flushCallbacks, 0);
}


对于vue3&＃xff0c;肯定就不需要这种方式了&＃xff0c;在不兼容ie的情况下&＃xff0c;可以直接使用promise了。

经过一次次处理&＃xff0c;现在是可以在视图更新以后再去拿最新的dom了。

当然&＃xff1a;对于更改值放在取值的下面&＃xff0c;那么获取到的肯定还是旧的dom值。vue也是如此的。

mixin的实现

Vue的mixin&＃xff0c;可以实现全局混入和局部混入。

全局混入对所有组件实例都生效。

暂时我实现了生命周期的混入&＃xff0c;对于data等其他特殊选项的合并还未处理。

对于混入的生命周期&＃xff0c;无论是一个还是多个相同的生命周期&＃xff0c;最终我们都转为使用数组包裹&＃xff0c;每个数组元素都是混入进来的生命周期。在创建组件实例的时候&＃xff0c;把传入的选项和全局的Vue.options选项进行合并到实例上&＃xff0c;实现混入效果。

参考资料

[1]

https://github.com/maolovecoding/mini-vue2-stage

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

关于本文

来自&＃xff1a;codermao

https://juejin.cn/post/7105011877159108644

最后

Node 社群我组建了一个氛围特别好的 Node.js 社群&＃xff0c;里面有很多 Node.js小伙伴&＃xff0c;如果你对Node.js学习感兴趣的话&＃xff08;后续有计划也可以&＃xff09;&＃xff0c;我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。如果你觉得这篇内容对你有帮助&＃xff0c;我想请你帮我2个小忙&＃xff1a;1. 点个「在看」&＃xff0c;让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长点赞和在看就是最大的支持❤️