vue mixins原理
时间:2022-07-24
本文章向大家介绍vue mixins原理,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
以前一直以为mixins在vue里面应该不是很重要,只是提供了一个混入的api,慢慢的才知道mixin在vue里面非常重要。生命周期、vuex等都有mixin的影子,在内部算是很重要的一个api。
先上精简过后的源码:
export const LIFECYCLE_HOOKS = [
'beforeCreate',
'created',
'beforeMount',
'mounted',
'beforeUpdate',
'updated',
'beforeDestroy',
'destroyed',
]
const strats = {};
function mergeHook(parentVal, childValue) {
if (childValue) {
if (parentVal) {
return parentVal.concat(childValue);
} else {
return [childValue]
}
} else {
return parentVal;
}
}
LIFECYCLE_HOOKS.forEach(hook => {
strats[hook] = mergeHook
})
上面这部分很好理解,是生命周期的合并,下面判断有这些生命周期的key的时候,直接调用strats[key](parent[key], child[key]),我们都知道生命周期的mixins是先执行mixins的再执行当前组件的,所以直接concat,后面执行循环调用的时候就是这个顺序。
export function mergeOptions(parent, child) {
const options = {}
if (child.mixins) {
for (var i = 0, l = child.mixins.length; i < l; i++) {
var mixin = child.mixins[i];
parent = mergeOptions(parent, mixin);
}
}
for (let key in parent) {
mergeField(key)
}
for (let key in child) {
if (!parent.hasOwnProperty(key)) {
mergeField(key);
}
}
function mergeField(key) {
if (strats[key]) {
options[key] = strats[key](parent[key], child[key]);
} else {
if (typeof parent[key] == 'object' && typeof child[key] == 'object') {
options[key] = {
...parent[key],
...child[key]
}
}else{
options[key] = child[key];
}
}
}
return options
}
这边生命周期是单独判断,其他熟悉方法则是一起的,比如方法methods,如果父和子都有,就结构合并在一起。因为mixins用法可以传入一个数组,这边还需要优先判断是否有mixins字段,有就要递归合并。
核心有了其他都是调用了,比如把mixin方法挂载到vue上可以直接调用:
Vue.mixin = function (mixin) {
// 将属性合并到Vue.options上
this.options = mergeOptions(this.options,mixin);
return this;
}
初始化的时候先合并一次,生命周期也是,在状态初始化之前先调用beforeCreate,初始化之后调用created,源码搜索Vue.prototype._init这个方法里面就能看见,包括其他生命周期,可以搜索callhook去看看:
vm.$options = mergeOptions(vm.constructor.options,options);
callHook(vm,'beforeCreate');
// 初始化状态
initState(vm);
callHook(vm,'created');
callHook就是循环调用生命周期:
export function callHook(vm, hook) {
const handlers = vm.$options[hook];
if (handlers) {
for (let i = 0; i < handlers.length; i++) {
handlers[i].call(vm);
}
}
}
mixin方法核心就是合并实例的属性,watch、methods、data等,也可以新增一开始没有的属性,比如vuex的$store。
(完)
- HDUOJ------(1230)火星A+B
- nyoj-----前缀式计算
- HDUOJ----(4788)Hard Disk Drive
- NYOJ-------笨蛋难题四
- Win平台Web访问白名单设置脚本(IP安全性原则)
- NYOJ-------表达式求值
- HDUOJ----1181 变形课
- 正确的Win主机网站伪静态设置方法
- HDUOJ----(1084)What Is Your Grade?
- HDUOJ------(1272)小希的迷宫
- HDUOJ ---1269迷宫城堡
- HDUOJ---1213How Many Tables
- hduoj----(1033)Edge
- HDUOJ----(1031)Design T-Shirt
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法