Vue.js 源码分析(一) 代码结构
关于Vue
vue是一个兴起的前端js库，是一个精简的MVVM。MVVM模式是由经典的软件架构MVC衍生来的，当View(视图层)变化时，会自动更新到ViewModel(视图模型)，反之亦然，View和ViewModel之间通过双向绑定(data-binding)建立联系。
前言
花了一个月时间撸了vue2.0的源码，最近空了一点，今天开始记录一下学习心得，按照自己理解的代码的结构，分为三部分来讲
基础篇 ;比如全局配置、模板渲染、data、method、computed、watch、生命周期、ref、组件原理、组件-props、组件自定义事件
指令篇 ;比如v-bind、v-on、v-if、v-else、v-else-if、v-for、v-html、v-text、v-once、v-pre、v-model、v-show
高级篇 ;过滤器、自定义指令、插槽、作用域插槽、异步组件、transition内置组件、transition-group内置组件、Keep-Alive内置组件
每一个知识点都会讲得比较详细，理解源码需要扎实的js基础。如果有遗漏的，最后再做一下补充，如果有问题，欢迎留言指出，非常感谢！
从源码的角度看，Vue和jQuery看是差不多，都只是一个前端框架， 区别是一个是mvc模式，一个是mvvc模式。Vue是把ES5的defineProperty函数用到了极致,而jQuery为了兼容低版本IE是没有封装这个API的，就像搭积木(对应的浏览器接口和ECMASCRIPT接口)，Vue用到了几个新的积木，而jQuery没有用到而已。从功能上，Vue应该和React、Angular来对比，它们和jQuery可以配合使用的。
vue实例化时会把模板(挂载到vue上的el元素对应的DOM节点，或者template属性)转换成一个虚拟的VNode，并在更新DOM时采用diff算法对DOM树进行检测，只更新需要更新的DOM节点，对于一些静态节点则不进行变更，以达到最快的速度。
采用的是v2.5.16这个版本的vue.js,本节先讲解Vue源码的大致结构,
代码结构
vue.js源码就是一个立即执行匿名函数表达式,内部定义了一个vue函数对象，组后返回挂载到window的vue属性上，先复习一下立即执行匿名函数表达式，如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
(function(global,msg){
global.alert(msg) //运行时会弹出一个窗口，内容为:Hello World
})(this,'Hello World')
</script>
</body>
</html>
知道了匿名函数后，我们来看看在Vue内部的样式，如下:
(function (global, factory) { //在浏览器环境下global等于全局window
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Vue = factory()); //执行factory()函数，将返回值Vue传递给window.Vue
}(this, (function () {
function Vue(options) { //内部定义的Vue函数
if ("development" !== 'production' && !(this instanceof Vue)) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}
return Vue; //返回Vue这个函数对象
})));
这样执行完这个匿名函数后就可以通过window.Vue访问到匿名函数内的Vue函数对象了。
writer by:大沙漠 QQ:22969969
这个匿名函数内部会在Vue的原型对象上挂载很多方法和属性以供我们使用，大致的主线流程如下(为了更好理解，去掉了所有分支)
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Vue = factory()); //执行factory()函数，将返回值Vue传递给window.Vue
}(this, (function () {
'use strict';
function Vue(options) { //VUE的构造函数
if ("development" !== 'production' && !(this instanceof Vue)) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options); //.实例化时，先执行到这里进行初始化
}
function initMixin(Vue) {
Vue.prototype._init = function (options) { //.再执行到这里
/**/
if (vm.$options.el) { //如果有传入了挂载点的el节点
vm.$mount(vm.$options.el); //通过$mount函数把组件挂载到DOM上面
}
}
}
function lifecycleMixin(Vue) {
Vue.prototype._update = function (vnode, hydrating) { //.更新操作，把Vnode渲染成真实DOM
/**/
if (!prevVnode) { //如果prevVnode为空，即初始化时
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false, vm.$options._parentElm, vm.$options._refElm); //执行vm.__patch__方法渲染成真实的DOM节点
vm.$options._parentElm = vm.$options._refElm = null;
} else { //如果prevVnode不为空，即更新操作时
vm.$el = vm.__patch__(prevVnode, vnode); //调用vm.__patch__进行更新操作
}
}
}
function renderMixin(Vue) {
/**/
Vue.prototype._render = function () { //.把rener渲染成Vnode
}
}
function mountComponent(vm, el, hydrating) { //.挂载组件 vm:Vue实例 el:真实的DOM节点对象
/**/
var updateComponent;
if ("development" !== 'production' && config.performance && mark) {
/**/
} else {
updateComponent = function () {vm._update(vm._render(), hydrating);}; //渲染成Vnode并转换为真实DOM
}
new Watcher(vm, updateComponent, noop, null, true); //Watcher实例创建后会通过get()方法执行updateComponent()方法的
/**/
}
Vue.prototype.__patch__ = inBrowser ? patch : noop;
Vue.prototype.$mount = function (el, hydrating) { //.原型上的挂载(runtime-only版本)
el = el && inBrowser ? query(el) : undefined; //进行一些修正,因为runtime-only版本是从这里开始执行的
return mountComponent(this, el, hydrating) ////再调用mountComponent方法
};
var mount = Vue.prototype.$mount; //保存原型上的$mount函数
Vue.prototype.$mount = function (el, hydrating) { //.解析源码(Runtime+Compiler版本用的)
/*中间进行模板的解析*/
return mount.call(this, el, hydrating) //最后执行mount
};
return Vue; //最后返回Vue函数对象，会作为一个Vue属性挂载到window上
})));
后面源码讲解时会仔细讲每个细节的
Vue.js 源码分析(一) 代码结构的更多相关文章
- Vue.js 源码分析(十七) 指令篇 v-if、v-else-if和v-else 指令详解
v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回true值的时候被渲染. v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用: 也可以使用 v- ...
- Vue.js 源码分析(三) 基础篇 模板渲染 el、emplate、render属性详解
Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会 ...
- Vue.js 源码分析(二) 基础篇 全局配置
Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies ;自定义合并策略的选项silent ...
- Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解
先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...
- Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解
对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
- Vue.js 源码分析(二十七) 高级应用 异步组件 详解
当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里 ...
- Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解
普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...
- Vue.js 源码分析(二十三) 指令篇 v-show指令详解
v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...
随机推荐
- attention 汇总（持续）
Seq2seq Attention Normal Attention 1. 在decoder端,encoder state要进行一个线性变换,得到r1,可以用全连接,可以用conv,取决于自己,这里 ...
- SqlServer，Oracle，db2，MySql查询表索引
SqlServer1. 查询表索引 SELECT 索引名称=a.name ,表名=c.name ,索引字段名=d.name ,索引字段位置=d.colid ,c.status FROM sysinde ...
- python基础(11):函数(一)
1. 什么是函数 1.我们到⽬前为⽌,已经可以完成⼀些软件的基础功能了.那么我们来完成这样⼀个功能: 约会: print("拿出⼿机") print("打开陌陌" ...
- springMVC校验器（validator）
springmvc使用的是Hibernate Validator(和Hibernate的ORM无关)来完成校验功能 一.普通校验 1.导入jar包 2.编写校验错误配置文件 3.配置校验错误信息文件 ...
- C++ 自增、自减运算符的重载和性能分析
01 ++.--运算符重载函数的格式 自增运算符和自减运算符是有前置和后置之分的,如: a++ // 后置自增运算符 ++a // 前置自增运算符 b-- // 后置自减运算符 --b // 前置自减 ...
- 0基础入门学习Python（第5章）
列表,元组和字符串 5.1 列表:一个打了激素的数组 有时候可能需要将一些相互之间有关联的数据保存在一起,这个就叫数组.Python将其称为列表. 5.1.1 创建列表 >>> [1 ...
- GDAL读取Shp问题解决：Unable to open EPSG support file gcs.csv
在GIS软件的开发中,经常用到开源库GDAL读取Shp数据,当shp数据中包含投影信息时,可能会遇到“Unable to open EPSG support file gcs.csv”错误提示,该错误 ...
- ABP进阶教程9 - CSV导出中文乱码
点这里进入ABP进阶教程目录 问题描述 功能按钮 - 导出CSV,中文信息导出为乱码. 解决方案 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\View ...
- 【团队项目3】需求改进&系统设计
一.需求 & 原型改进 1.针对课堂讨论环节老师和其他组的问题及建议,对修改选题及需求进行修改 根据用户反馈,我们针对如下问题做了修改: 问题1:如何保证机构是否是官方的?平台是否有监管? 修 ...
- 透过systemctl管理mysqld服务
1. 背景 CentOS 7.x 之前的版本,系统启动时,第一支呼叫的程序是 init ,然后 init 去唤起所有的系统所需要的服务,无论是本地服务还是网络服务.所有的服务启动脚本都放置于 /etc ...