资讯专栏INFORMATION COLUMN

入口文件开始,分析Vue源码实现

Karrdy / 1805人阅读

摘要:一方面是因为想要克服自己的惰性,另一方面也是想重新温故一遍。一共分成了个基础部分,后续还会继续记录。文章中如果有笔误或者不正确的解释,也欢迎批评指正,共同进步。最后地址部分源码

Why?

网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行

然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一些疑问,可能官网上只会建议你这么做,但是核心实现我们可能并不知道。比如:

v-for key 是如何达到“就地复用”策略

数组更新检测是如何完成的

set 为什么就能动态添加根级别的响应式属性

为什么Vue可以跨平台支持weex,以及后来出现的mpvue

...

其次,很久没有更新内容了,之前对Vue源码也是有点研究,只不过没有很体系的记录,现在抽了点时间,做了一次基础的总结吧。一方面是因为想要克服自己的惰性,另一方面也是想重新温故一遍。

What?

一共分成了10个基础部分,后续还会继续记录。我们可以先看一下概览:

然后我们来看一下基础的目录:

入口开始,解读Vue源码(一)———— 造物创世

入口开始,解读Vue源码(二)—— new Vue 的故事

入口开始,解读Vue源码(三)—— initMixin 上篇

入口开始,解读Vue源码(三)—— initMixin 下篇

入口开始,解读Vue源码(四)—— 实现一个基础的 Vue 双向绑定

入口开始,解读Vue源码(五)—— $mount 内部实现

入口开始,解读Vue源码(六)—— $mount 内部实现 --- compile parse函数生成AST

入口开始,解读Vue源码(七)—— $mount 内部实现 --- compile optimize标记节点

入口开始,解读Vue源码(八)—— $mount 内部实现 --- compile generate 生成render函数

入口开始,解读Vue源码(九)—— $mount 内部实现 --- render函数 --> VNode

入口开始,解读Vue源码(十)—— $mount 内部实现 --- patch

End?

文章前后也是利用碎片时间总结整理而成,有些也是翻阅了很多的资料,也有过引用巨人的段落,文章中有所标注。如果没有标注,可能是本人忘记了,欢迎提醒。文章中如果有笔误或者不正确的解释,也欢迎批评指正,共同进步。

最后:

github地址

部分源码demo

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94570.html

相关文章

  • 入口文件开始分析Vue源码实现

    摘要:一方面是因为想要克服自己的惰性,另一方面也是想重新温故一遍。一共分成了个基础部分,后续还会继续记录。文章中如果有笔误或者不正确的解释,也欢迎批评指正,共同进步。最后地址部分源码 Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行。 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一些疑问,可...

    nidaye 评论0 收藏0
  • 来一打前端博客压压惊

    前言 本文所有内容全部发布再个人博客主页 https://github.com/muwoo/blogs欢迎订阅。不过最近因为事情比较多,有一段时间没有更新了,后面打算继续不断学习更新,欢迎小伙伴一起沟通交流~ 最近更新 前端单测的那些事 基于virtual dom 的canvas渲染 js Event loop 机制简介 axios 核心源码实现原理 JS 数据类型、赋值、深拷贝和浅拷贝 j...

    wangbinke 评论0 收藏0
  • 来一打前端博客压压惊

    前言 本文所有内容全部发布再个人博客主页 https://github.com/muwoo/blogs欢迎订阅。不过最近因为事情比较多,有一段时间没有更新了,后面打算继续不断学习更新,欢迎小伙伴一起沟通交流~ 最近更新 前端单测的那些事 基于virtual dom 的canvas渲染 js Event loop 机制简介 axios 核心源码实现原理 JS 数据类型、赋值、深拷贝和浅拷贝 j...

    villainhr 评论0 收藏0
  • 来一打前端博客压压惊

    前言 本文所有内容全部发布再个人博客主页 https://github.com/muwoo/blogs欢迎订阅。不过最近因为事情比较多,有一段时间没有更新了,后面打算继续不断学习更新,欢迎小伙伴一起沟通交流~ 最近更新 前端单测的那些事 基于virtual dom 的canvas渲染 js Event loop 机制简介 axios 核心源码实现原理 JS 数据类型、赋值、深拷贝和浅拷贝 j...

    xiaoqibTn 评论0 收藏0
  • vue-cli 3.0 源码分析

    摘要:写在前面其实最开始不是特意来研究的源码,只是想了解下的命令,如果想要了解命令的话,那么绕不开写的。通过分析发现与相比,变化太大了,通过引入插件系统,可以让开发者利用其暴露的对项目进行扩展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 写在前面 其实最开始不是特意来研究 vue-cli 的源码,只是想了解下 n...

    yiliang 评论0 收藏0

发表评论

0条评论

Karrdy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<