• Stars
    star
    1,355
  • Rank 34,674 (Top 0.7 %)
  • Language
    JavaScript
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

vue源码分析 -- 基于 2.2.6版本

vue2.0-source

vue 2.2.6源码分析

最近一直在看vue2.2.6的源码,所以准备分几个模块分别记录一下。由于水平有限,对整个框架的源码还没有整体的把握。所以前期内容可能比较零散,更多的是记录自己看的过程。慢慢整理成比较完整的源码分析。

备注:最近为了加深印象,写了一个简单的mvvm的实现,参考了Vue中模板解析、数据监听、render函数的生成,传送门

该源码分析,会带着大家一起学习Vue的大部分代码,而不是简单的讲一下它的原理,我会尽可能的多解释每一行主要的代码含义,另外一些辅助方法什么的,大家可以在学习的过程中,自己看一眼就知道了。

Vue源码目录结构整理

从入口文件查看Vue源码

从小栗子查看Vue的生命周期

双向数据绑定

compile概述

compile——生成ast

compile——优化静态内容

compile——生成render字符串

vdom概述

Vue.extend

vdom——VNode

children的归一化处理

patch——创建dom

patch——diff

patch——自定义组件的处理流程

事件处理

指令的处理

directives概述

自定义指令

v-for

v-if

v-once

v-show

v-text、v-html、v-cloak、v-pre

v-model

内置组件和标签

slot和作用域插槽

keep-alive

以下是整理一些比较零散的数据,主要是记录结构中每个数据表示什么意思,会不断完善更新:

Vue全局属性

Vue实例属性

AstElement

VNode