一,mixin的理解总结:
在Vue中,mixin中的属性和方法都会被合并到组件中,但是不同类型的属性和方法会被合并到不同的结构中:
(1)在Vue的mixin合并中,以下是对象类型的属性和方法:
data
computed
methods
watch
props
provide和inject
以上属性和方法会被合并成一个新对象,如果出现相同的属性,组件中的属性会覆盖mixin中的属性。
(2)以下是数组类型的属性和方法:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
以上属性和方法会被合并成一个数组,如果出现相同的属性,mixin中的属性会排在组件中的属性前面。
需要注意的是,mixins属性本身是一个数组,用于指定需要混入组件的mixin,它不会被合并成一个新数组。
(3)对象类型的属性和方法会被合并成一个新对象,如果出现相同的属性,组件中的属性会覆盖mixin中的属性。
例如:
var myMixin = {
data: function () {
return {
a: 1
}
},
methods: {
foo: function () {
console.log('foo')
}
}
}
// 定义组件
var myComponent = {
mixins: [myMixin],
data: function () {
return {
b: 2
}
},
methods: {
bar: function () {
console.log('bar')
}
}
}
// 合并后的对象如下:
{
data: function () {
return {
a: 1,
b: 2
}
},
methods: {
foo: function () {
console.log('foo')
},
bar: function () {
console.log('bar')
}
}
}
(4)数组类型的属性和方法会被合并成一个数组,如果出现相同的属性,mixin中的属性会排在组件中的属性前面。
例如:
var myMixin = {
created: function () {
console.log('mixin created')
}
}
// 定义组件
var myComponent = {
mixins: [myMixin],
created: function () {
console.log('component created')
}
}
// 合并后的数组如下:
[
function () {
console.log('mixin created')
},
function () {
console.log('component created')
}
]
二,mixin的使用(来自官网)
(1)基础
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
例子:
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
(2)选项合并
(2.1)当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。
比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先(minxin都以组件的为主)。
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
(2.2)同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
(2.3)值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
注意:Vue.extend() 也使用同样的策略进行合并。
(3)全局混入
混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
三,总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象Data都为undefined,还未初始化。created阶段,vue实例的数据对象data有了,el还没有
载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后:当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。
activated: keep-alive组件激活时调用
deactivated: keep-alive组件销毁时调用
errorCaptured: 当捕获一个来自子孙组件的错误时被调用
包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。
父子组件生命周期执行顺序
创建与挂载
父beforeCreate > 父created > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > 父mounted
更新
父beforeUpdate > 子beforeUpdate > 子updated > 父updated
销毁
父beforeDestroy > 子beforeDestroy > 子destroyed > 父destroyed
父子组件及mixin的生命周期执行顺序
mixin的生命周期钩子在组件的生命周期钩子之前执行
在父组件中引入了mixin,生命周期顺序如下:
mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted >父mounted
以上这些只是为了学习做的个人总结,有部分摘自大牛原话,本人只是为了学习方便做的笔记,如有侵权,联系必删!