1. Summary of understanding of mixin:
In Vue, properties and methods in mixins will be merged into components, but different types of properties and methods will be merged into different structures:
(1) In Vue’s mixin merge, the following are the properties and methods of the object type:
data
computed
methods
watch
props
provide and inject
The above properties and methods will be merged into a new object . If the same properties appear, the properties in the component will overwrite the properties in the mixin .
(2) The following are the properties and methods of the array type:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
The above properties and methods will be merged into an array . If the same properties appear, the properties in the mixin will be ranked before the properties in the component .
It should be noted that the mixins attribute itself is an array, which is used to specify the mixins that need to be mixed into the component. It will not be merged into a new array.
(3) The properties and methods of the object type will be merged into a new object. If the same properties appear, the properties in the component will overwrite the properties in the mixin.
For example:
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) Array type properties and methods will be merged into an array. If the same properties appear, the properties in the mixin will be ranked before the properties in the component.
For example:
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')
}
]2. Use of mixin (from official website)
(1) Basics
Mixins provide a very flexible way to distribute reusable functionality in Vue components. A mixin can contain arbitrary component options. When a component uses a mixin, all of the mixin's options will be "mixed" into the options of the component itself.
example:
// 定义一个混入对象
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) Option merge
(2.1) When components and mix-in objects contain options with the same name, these options will be "merged" in an appropriate manner .
For example, data objects will be merged recursively internally, and when a conflict occurs, component data will take precedence (the minxin is based on the component) .
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) Hook functions with the same name will be combined into an array , so they will all be called . Additionally, the hooks of the mixin object will be called before the component's own hooks .
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"(2.3) Options whose values are objects, such as methods, components and directives , will be merged into the same object. When the key names of two objects conflict , the key-value pair of the component object is taken .
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"Note: Vue.extend() also uses the same strategy for merging.
(3) Global mixing
Mixins can also be registered globally. Use with extreme caution! Once a global mixin is used, it will affect every Vue instance created thereafter. When used appropriately, this can be used to inject processing logic for custom options.
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"Third, it is divided into 8 stages in total: before/after creation, before/after loading, before/after update, and before/after destruction.
Before/after creation: In the beforeCreated stage, the mounting element $el and the data object Data of the vue instance are both undefined and have not been initialized. In the created phase, the data object data of the vue instance is available, but el is not yet available.
Before/after loading: In the beforeMount stage, $el and data of the vue instance are initialized, but the virtual dom node before is still mounted, and data.message has not been replaced. In the mounted phase, the vue instance is mounted and data.message is successfully rendered.
Before/after update: When data changes, the beforeUpdate and updated methods will be triggered.
Before/after destruction: After executing the destroy method, changes to the data will no longer trigger the periodic function, indicating that the Vue instance has released event monitoring and binding to the DOM, but the DOM structure still exists.
activated: called when the keep-alive component is activated
deactivated: called when the keep-alive component is destroyed
errorCaptured: Called when capturing an error from a descendant component
When wrapping dynamic components, inactive component instances will be cached, mainly to retain component state or avoid re-rendering.
Parent-child component life cycle execution order
Create and mount
Father beforeCreate > Father created > Father beforeMount > Child beforeCreate > Child created > Child beforeMount > Child mounted > Father mounted
renew
Father beforeUpdate > Child beforeUpdate > Child updated > Father updated
destroy
Father beforeDestroy > Child beforeDestroy > Child destroyed > Father destroyed
The life cycle execution order of parent-child components and mixin
The mixin's lifecycle hook is executed before the component's lifecycle hook
Mixin is introduced in the parent component, and the life cycle sequence is as follows:
mixin beforeCreate > father beforeCreate > mixin created > father created > mixin beforeMount > father beforeMount > child beforeCreate > child created > child beforeMount > child mounted > mixin mounted > father mounted
The above are just personal summaries for learning. Some of them are excerpted from Daniel’s original words. I just took notes for the convenience of learning. If there is any infringement, the contact will be deleted!