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

入口文件开始,分析Vue源码实现的更多相关文章

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

    Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...

  2. 用console.log分析Vue源码

    前言 本文通过console.log的一些特性,结合vue.js的源码,通过一个简单的例子,让你了解Vue的各个过程的变化. 控制台输出的效果图 请用chrome查看,并打开控制台看效果 演示地址 准 ...

  3. [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串

    本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...

  4. Vue源码学习二 ———— Vue原型对象包装

    Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...

  5. [Vue源码]一起来学Vue模板编译原理(一)-Template生成AST

    本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vu ...

  6. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  7. Vue 源码解读(8)—— 编译器 之 解析(上)

    特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...

  8. vue源码入口文件分析

    开发vue项目有段时间了, 之前用angularjs 后来用 reactjs 但是那时候一直没有时间把自己看源码的思考记录下来,现在我不想再浪费这 来之不易的思考, 我要坚持!! 看源码我个人感觉非常 ...

  9. Vue源码解析(一):入口文件

    在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析: 一.源码的目录结构: Vue的源码都在src目录下 ...

随机推荐

  1. c# windows service 实现监控其他程序是否被关闭,关闭则报警

    namespace MonitorService { public partial class MonitorSv : ServiceBase { string AppName = "&qu ...

  2. JAVA_SE基础——19.数组的定义

    数组是一组相关数据的集合,数组按照使用可以分为一维数组.二维数组.多维数组 本章先讲一维数组 不同点: 不使用数组定义100个整形变量:int1,int2,int3;;;;;; 使用数组定义 int ...

  3. Golang学习--开篇

    最近开始接收一个新项目,是使用Golang写的,需要重新捡起Golang来,于是就有了这个系列博客. Golang的环境配置,我就不说了,让我们直接开始. Golang官网:https://golan ...

  4. cannot import name 'ChineseAnalyzer'

    在python3.6下安装jieba3k的时候报错: from jieba.analyse import ChineseAnalyzer ImportError: cannot import name ...

  5. AWS的开发工具包和设备SDK开发工具包

    一.开发工具包 二.设备sdk开发工具包

  6. zuul入门(4)zuul的注解@EnableZuulServer和@EnableZuulProxy

    @EnableZuulServer.@EnableZuulProxy两个注解 @EnableZuulProxy简单理解为@EnableZuulServer的增强版,当Zuul与Eureka.Ribbo ...

  7. Bootstrap 栅格系统简单整理

    Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 总结一下我近期的学习Bootstrap的一些理解: 一.. ...

  8. python flask框架 蓝图的使用

    蓝图的目的是实现 各个模块的视图函数写在不同的py文件当中. 主视图 中 导入 分路由视图的模块,并且注册蓝图对象 分路由视图中 利用 蓝图对象 的route 进行装饰视图函数 主路由视图函数: #c ...

  9. Python第三方库的安装方法总结

    源码安装 很多第三方库都是开源的,几乎都可以在github 或者 pypi上找到源码.找到源码格式大概都是 zip . tar.zip. tar.bz2格式的压缩包.解压这些包,进入解压好的文件夹,通 ...

  10. hdu-2639 Bone Collector II---第k大背包

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2639 题目大意: 求第k大背包. 思路: 由01背包递推式dp[i][j] = max(dp[i][ ...