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标签(插槽)规定对应的内容放置在哪里,比如: ...
随机推荐
- PHP TP框架自定义打印函数P
效果如下,有个灰色背景,也不一定是灰色可以改 代码: //传递数据以易于阅读的样式格式化后输出function p($data){ // 定义样式 $str='<pre style=" ...
- oracle11g安装教程
- GO 函数的参数
一.函数 函数的参数 1.1 参数的使用 形式参数:定义函数时,用于接收外部传入的数据,叫做形式参数,简称形参. 实际参数:调用函数时,传给形参的实际的数据,叫做实际参数,简称实参. 函数调用: ...
- .net core 后台如何生成html字符串到前台_后台html字符串在前台显示编码状态
1-后台生成html字符串的方法一般是: this.ViewData.Add("CURRENCY_SYMBOLS", new HtmlString(JsonHelper.Conve ...
- 投色子--html demo
这是之前客户想要看的一个效果,不知道放在博客里面有没有关系,当做备份吧. <!DOCTYPE HTML> <html> <head> <meta charse ...
- go-控制语句
if else else不能换行 if后最好不加小括号,当然可以加,但建议不加 求平方根 引入math包 调用math.Sqrt(num)函数 switch分支 不用加break来跳出,每一个case ...
- SPA项目搭建及嵌套路由
Vue-cli: 什么是vue-cli? vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下: vue init webpack xxx 注1:xx ...
- Spring MVC的常用注解(一)
概述 Spring从2.5版本开始引入注解,虽然版本不断变化,但是注解的特性一直被延续下来并不断进行扩展,这里就来记录一下Spring MVC中常用的注解,本文记录@Controller.@Reque ...
- 用ggplot包画一个简单饼图
首先用library函数加载ggplot2包 library(ggplot2) library(dplyr) library(tidyr) library(splines) 接下来,进行数据准备: d ...
- 简易用户管理系统-前端实现(表单&提交请求&button$基础)
laravel框架编写简易用户管理系统,前端Layui框架. 1.动态生成列表项 实现效果 PHP后台传入用户对象($users). 前端页面接收数据传入table. 逻辑就是在生成表格时,遍历传来的 ...