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. JAVA_SE基础——30.构造代码块

    黑马程序员入学blog...构造代码块作用:给所有的对象进行统一的初始化. 问题:要求每个小孩出生都会哭,这份代码有两个构造函数,如果需要每个小孩出生都要哭的话,那么就需要在不同的构造函数中都调用cr ...

  2. linux的链接工具secure设置字体大小和颜色

  3. Docker Mysql主从同步配置搭建

    Docker Mysql主从同步配置搭建 建立目录 在虚拟机中建立目录,例如路径/home/mysql/master/data,目录结构如下: Linux中 新建文件夹命令:mkdir 文件夹名 返回 ...

  4. centos7搭建nexus maven私服(二)

    本文主要补充两个主题: 1.手动更新索引 2.通过maven客户端发布本地jar包到nexus 先说第一个主题: 由于maven中央仓库汇集了全世界绝大多数的组件,所以它的索引库非常庞大,在我们右击仓 ...

  5. POJ2398【判断点在直线哪一侧+二分查找区间】

    题意:同POJ2318 #include<algorithm> #include<cstdio> #include<cstdlib> #include<cst ...

  6. 框架学习之Struts2(四)---拦截器和标签

    一.拦截器概述 1.1 在struts2框架中封装了很多功能,struts2里面封装的功能都是在拦截器里面,struts2里面又很多拦截器,但不是每次这些拦截器都执行,每次执行型默认的拦截器. 默认拦 ...

  7. POJ-3292 Semi-prime H-numbers---筛素数

    题目链接: https://vjudge.net/problem/POJ-3292 题目大意: 定义一种数叫H-numbers,它是所有能除以四余一的数. 在H-numbers中分三种数: 1.H-p ...

  8. 广度优先(bfs)和深度优先搜索(dfs)的应用实例

    广度优先搜索应用举例:计算网络跳数 图结构在解决许多网络相关的问题时直到了重要的作用. 比如,用来确定在互联网中从一个结点到另一个结点(一个网络到其他网络的网关)的最佳路径.一种建模方法是采用无向图, ...

  9. 06、NetCore2.0依赖注入(DI)之整合Autofac

    06.NetCore2.0依赖注入(DI)之整合Autofac 除了使用NetCore2.0系统的依赖注入(DI)框架外,我们还可以使用其他成熟的DI框架,如Autofac.Unity等.只要他们支持 ...

  10. html的特点及结构

    html 语言就是开发网页的基础语言: html(超文本标记语言) 标记 : 该门语言是有标签来构成的. 学习html不用怎么去理解,只要需要记住标签的作用即可. html语言的特点: 1. html ...