Table of contents
Duplicates of mixins and components
Components are isolated from each other
Differences from public components
introduction
Vue advanced series of tutorials will continue to be released on this account, let’s check and fill in the gaps and have a good time! If you encounter other related problems, you are very welcome to leave a message in the comments for discussion, so as to help more people. If you feel that this article is helpful to you, please like it!
On July 28, 2013, You Yuxi submitted code for Vue.js on GitHub for the first time; on October 26, 2015, Vue.js version 1.0.0 was released; on October 1, 2016, Vue.js 2.0 release.
The earliest Vue.js was only a view layer, no routing, no state management, and no official build tools. There was only one library, which could be used directly in a web page.
Later, Vue.js slowly began to add some official auxiliary tools, such as routing (Router), state management solution (Vuex) and construction tool (Vue-cli). At this time, the positioning of Vue.js is: The Progressive Framework. Translated into Chinese, it is a progressive framework.
Vue.js2.0 introduces many features, such as virtual DOM, supports JSX and TypeScript, supports streaming server-side rendering, and provides cross-platform capabilities. Vue.js users in China include Alibaba, Baidu, Tencent, Sina, Netease, Didi Chuxing, 360, Meituan and so on.
Vue is already a necessary skill for a front-end engineer, now let us start to learn the core technical principles inside Vue.js!
what is mixin
Mixin is a code reuse technology provided by Vue, also known as mixin. We can define all options in the component in the mixin, such as data, methods and various lifecycle hooks. Then introduce the defined mixin in our component, at this time all the content we defined in the mixin are integrated with our component like a soul possessing. It is usually used to reduce code redundancy when extracting duplicate content from components.
How to define a mixin
The definition of mixin is divided into two types: local registration and global registration. Let's look at local registration first.
-
partial registration
// a.js
export default {
created(){
console.log('mixin created')
},
data(){
return {
name:'mixin-name'
}
}
}
// App.vue
<template>
<div class=''></div>
</template>
<script>
import a_mixin from './a.js'
export default {
mixins:[a_mixin],
mounted() {
console.log('name',this.name)
}
}
</script>
// mixin created
// name mixin-name
In the above code, we now define a common object in a.js, which contains the created hook function and data function, and then mixes in the content defined by a.js through the mixins option inside the App.vue component. The execution result is to output mixin created and name mixin-name. The defined created and data are mixed into App.vue. But what if the content defined in mixin is repeated with App.vue?
-
global registration
Through the Vue.mixin() function provided by Vue, we only need to introduce the mixin file we defined in main.js, and then pass it into Vue.mixin(). At this time, each of our components can use the content in the mixin, and there is no need to introduce the mixins option.
// a.js
export default {
created(){
console.log('mixin created')
},
data(){
return {
name:'mixin-name'
}
}
}
// main.js
import a_mixin from './a.js'
Vue.mixin(mixin)
Duplicates of mixins and components
For duplication between mixins and components, the solution varies depending on the options.
-
Options in the form of objects, such as data, methods, computed, components: If there are no duplicates, the options in mixin and App.vue will be merged, which is a union operation. If there are duplicates, the App.vue's data will end up being kept.
// a.js
export default {
created(){
console.log('mixin created')
},
data(){
return {
name:'mixin-name'
}
}
}
// App.vue
<template>
<div class=''></div>
</template>
<script>
import a_mixin from './a.js'
export default {
data(){
return {
name:'app-name'
}
},
mixins:[a_mixin],
mounted() {
console.log('name',this.name)
}
}
</script>
// mixin created
// name app-name
-
In the form of functions, such as lifecycle hook functions: the lifecycle hook functions defined in mixin and the lifecycle hook functions in App.vue will be retained, and the lifecycle hooks in mixin will be executed first.
// a.js
export default {
created(){
console.log('mixin created')
},
data(){
return {
name:'mixin-name'
}
}
}
// App.vue
<template>
<div class=''></div>
</template>
<script>
import a_mixin from './a.js'
export default {
data(){
return {
name:'app-name'
}
},
mixins:[a_mixin],
created(){
console.log('app created')
}
}
</script>
// mixin created
// app created
Components are isolated from each other
The variables defined by mixin are isolated from each other among the components. If one component modifies the value, other components will not change.
-
// a.js export default { created(){ console.log('mixin created') }, data(){ return { name:'mixin-name' } } } // App.vue <template> <div class=''></div> </template> <script> import a_mixin from './a.js' export default { mixins:[a_mixin], mounted(){ this.name = 'appName' console.log('app_name',this.name) // appName } } </script> // Home.vue <template> <div class=''></div> </template> <script> import a_mixin from './a.js' export default { mixins:[a_mixin], mounted(){ console.log('home_name',this.name) // mixin_name } } </script>
Differences from Vuex
vuex : State management between components, modifying the state value in one component, the current state in other components will also change accordingly.
mixin: Used to reuse repetitive code, each component is isolated from each other, and values modified in one component will not change in other components.
Differences from public components
Public component: The public component encapsulates an independent part, and there are essentially two components between it and the parent component.
mixin: mixin is to mix our mixin into the component to merge the properties, and it is still a component in essence.
Summarize
Vue advanced series of tutorials will continue to be released on this account, let’s check and fill in the gaps and have a good time! If you encounter other related problems, you are very welcome to leave a message in the comments for discussion, so as to help more people. If you feel that this article is helpful to you, please like it!