VUE3.0源码全系列解读
peindaihe
一名兴趣使然的码农
展开
-
Vue3.0 - 源码解读 - 调度系统
一、前言vue3.0是如何对框架执行中的任务进行调度的呢?我们知道js是单线程的,如果所有任务都是一鼓作气的同步去执行,会导致主线程的阻塞,那么当你想在表单输入东西时,由于主线程被其他任务占据,所以你的输入任务是无法立即得到响应的。调度系统是为了解决这个问题。vue的调度系统相对比较轻,并没有像react那样引入fiber这么重的调度算法(做了快两年),而是巧妙的运用了js微任务机制,将更新触发的任务放到一个微任务中,这样就保证在有大量更新任务时,主线程不会被阻塞,等主线程任务执行完毕后,微任务中的更新原创 2020-08-23 23:58:44 · 1437 阅读 · 3 评论 -
Vue3.0源码解读 - 编译系统
position:包含offset、line、column三个属性,offset记录parser解析到的位置相对原始template string开头的位置,line记录parser解析到的行数,column为列数,因为parse过程中会遇到\n\t\f之类的转义字符。baseParse:将template string解析成AST,AST是vue对节点的一种表述形式,和平时JS生成的抽象语法树是两码事。export function baseParse( content: string, //原创 2020-07-04 23:53:54 · 1940 阅读 · 3 评论 -
Vue3.0源码解读 - 响应式系统
核心方法track:const arr = [2, 3, 6]const proxy = new Proxy(arr, { get(target, key, receiver) { console.log('get', key) return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { console.log('set', ke原创 2020-05-31 13:35:05 · 1230 阅读 · 3 评论 -
vue3.0源码解读 -渲染系统
vue3.0的patch相对于2.0做了很多优化,vue3.0在编译阶段会对vnode截形flag标记,用于对vnode更新时的diff做性能优化。下面我们从patch函数入口开始一步一步的了解3.0时如何进行patch的,以及具体有了哪些性能提升。...原创 2020-05-30 23:13:20 · 2719 阅读 · 1 评论