Vue.js 源码分析(三十二) 总结
第一次写博客,坚持了一个多月时间,Vue源码分析基本分析完了,回过头也看也漏了一些地方,比如双向绑定里的观察者模式,也可以说是订阅者模式,也就是Vue里的Dep、Watcher等这些函数的作用,网上搜一下讲解也挺多的,这些知识点也是很重要的,对于阅读源码的同学这一块务必要花点时间学一下
还有一个挺重要是Vue的一个use和mixin方法,这两个方法用于Vue插件的注册,比如Vuex、Vuex-router等等都是通过Vue.use()来注册的,注册完后会执行对应插件的install方法进行安装,例如对于Vuex来说:
if (version >= 2) {
Vue.mixin({ beforeCreate: vuexInit }); //对于Vuex来说,通过mixin混入,在Vue的beforeCreate生命周期函数内插入一个vuexInit方法
} else {
// override init and inject vuex init procedure
// for 1.x backwards compatibility.
var _init = Vue.prototype._init;
Vue.prototype._init = function (options) {
if ( options === void 0 ) options = {}; options.init = options.init
? [vuexInit].concat(options.init)
: vuexInit;
_init.call(this, options);
};
}
对于Vue-router来说,如下:
Vue.mixin({ //对于Vue-router来说,通过mixin混入,在Vue的beforeCreate和destroyed生命周期函数内分别插入两个函数体
beforeCreate: function beforeCreate () {
if (isDef(this.$options.router)) {
this._routerRoot = this;
this._router = this.$options.router;
this._router.init(this);
Vue.util.defineReactive(this, '_route', this._router.history.current);
} else {
this._routerRoot = (this.$parent && this.$parent._routerRoot) || this;
}
registerInstance(this, this);
},
destroyed: function destroyed () {
registerInstance(this);
}
});
当我们执行Vue.use(Vuex)或者Vue.use(Router)安装Vuex或Vue-router插件时,就会执行Vue内部的use函数接口,如下:
Vue.use = function (plugin) { //第4728行 注册插件用
var installedPlugins = (this._installedPlugins || (this._installedPlugins = [])); //获取当前Vue已经注册的插件列表
if (installedPlugins.indexOf(plugin) > -1) { //如果plugin插件已经注册过了
return this //直接返回,不做处理
} // additional parameters
var args = toArray(arguments, 1); //去掉第一个参数
args.unshift(this); //然后将大Vue放进去
if (typeof plugin.install === 'function') { //如果有该插件有install方法
plugin.install.apply(plugin, args); //执行该install方法,参数为args(第一个参数为大Vue的实例)
} else if (typeof plugin === 'function') {
plugin.apply(null, args);
}
installedPlugins.push(plugin); //将插件plugin保存到installedPlugins里面,避免多次执行Use时重复安装
return this
};
writer by:大沙漠 QQ:22969969
也就是说执行插件的install函数时,函数内的上下文为Vue实例,然后就可以在Vue内部的生命周期内执行各种操作了,这就是插件的逻辑了。
mixin就是混入的意思,也就是把对象里的信息保存到Vue实例的options上,一般是混入一些生命周期函数,源码就一行,保存到Vue实例的options上,我就不贴了。
从整体来看,Vue只是一个匿名函数,该函数会在window.Vue这个属性上挂载一个函数,然后在该函数本身或函数原型上定义一些属性、操作如此而已,只是Vue定义的属性和操作比多,看起来复杂,例如Vue有一万多行代码,不只是Vue,大多话前端框架基本都是这个设计模式吧(通过执行一个匿名函数来给window挂载一个属性作为调用的接口)。
理解源码有一个好处就是用起来真的很爽,比如我现在工作用到Vue时就和算算术题1+1=2一样,而且写起代码来没有冗余代码,因为你知掉它是怎么实现的了。
Vue.js 源码分析(三十二) 总结的更多相关文章
- Vue.js 源码分析(三十) 高级应用 函数式组件 详解
函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...
- Vue.js 源码分析(三) 基础篇 模板渲染 el、emplate、render属性详解
Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会 ...
- Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解
当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...
- ABP源码分析三十二:ABP.SignalR
Realtime Realtime是ABP底层模块提供的功能,用于管理在线用户.它是使用SignalR实现给在线用户发送通知的功能的前提 IOnlineClient/OnlineClient: 封装在 ...
- spark 源码分析之十二 -- Spark内置RPC机制剖析之八Spark RPC总结
在spark 源码分析之五 -- Spark内置RPC机制剖析之一创建NettyRpcEnv中,剖析了NettyRpcEnv的创建过程. Dispatcher.NettyStreamManager.T ...
- Vue.js 源码分析(一) 代码结构
关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
- Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解
普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...
- Vue.js 源码分析(二十五) 高级应用 插槽 详解
我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如: ...
随机推荐
- 【UOJ#310】【UNR#2】黎明前的巧克力(FWT)
[UOJ#310][UNR#2]黎明前的巧克力(FWT) 题面 UOJ 题解 把问题转化一下,变成有多少个异或和为\(0\)的集合,然后这个集合任意拆分就是答案,所以对于一个大小为\(s\)的集合,其 ...
- LinkedHashMap,源码解读就是这么简单
概述 LinkedHashMap是HashMap的子类,它的大部分实现与HashMap相同,两者最大的区别在于,HashMap的对哈希表进行迭代时是无序的,而LinkedHashMap对哈希表迭代是有 ...
- Javascript中的几种函数
(1)普通函数:这种函数是我们日常使用中用的最多的,用function关键字定义的函数.这也是符合多种语言定义的. function foo(){ // code } (2)箭头函数:用=>运算 ...
- RV32FDQ/RV64RDQ指令集(2)
下面我们逐个看下每个指令的细节: fadd.s fadd.s rd, rs1, rs2 //f [rd] = f [rs1] + f [rs2]单精度浮点加(Floating-point Ad ...
- RV32FDQ/RV64RDQ指令集(1)
Risc-V架构定义了可选的单精度浮点指令(F扩展指令集)和双精度浮点指令(D扩展指令集),以及四精度浮点指令集(Q扩展指令集).Risc-V架构规定:处理器可以选择只实现F扩展指令子集而不支持D扩展 ...
- Windows命令行打开文件夹图形界面
1.打开当前目录 explorer . 2.打开上级目录 explorer .. 3.打开任意目录 explorer dirname
- 上传App Store 被拒问题及解决方案总结
最近公司比较忙,一直忙着写代码做新的应用,一连上线了几个应用,我们也是忙得焦头烂额的,都没时间做总结,今天趁APP审核期间,总结一下近期上传App Store遇到的一些问题和解决方法,以便以后查阅. ...
- 08 在设备树里描述platform_device【转】
转自:https://blog.csdn.net/jklinux/article/details/78575281 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...
- 无序数组中用 快速排序的分治思想 寻找第k大元素
#include <stdio.h> int *ga; int galen; void print_a(){ ; i < galen; i++){ printf("%d & ...
- 【bzoj2648】SJY摆棋子(kdtree)
传送门 题意: 二维平面上有若干个点. 现在要维护一种数据结构,支持插入一个点以及询问其余点到某个点的最小曼哈顿距离. 思路: 这是个\(kdtree\)模板题. \(kdtree\)是一种可以高效处 ...