How to understand and optimize the work Vue.mixin

About Vue.mixin vue in official documents is so explained:

　　Mixing (a mixin) provides a very flexible way to distribute Vue assembly reusable functions. A mixed object can contain any component options. When a component uses mixed object, all objects will be mixed with the options "hybrid" option to enter the assembly itself.

　　Our understanding: Vue.mixin provides us with a method of mixing Vue instance, to create a mixed after the object, method, or variable definition since we can easily mount the Vue instance, bring convenience to our lazy ;

　　Vue.mixin provides two ways for us to mix: mix of local and global mixed;

　　In this paper or in demo form to learn to explain, if the conditions best to follow the demo knock again, this impression will be profound;

　　Local mixed:

　　　　Part name suggests is mixed, which is mixed into the mixin introduced only objects can use, and only after the introduction of mixed components mixin object takes effect;

　　　 To know the concept, we ( the building blocks of creative ) take a look at the code:

　　　　First Vue build their own development environment, then we create two files in the src directory vue, respectively page1.vue and page2.vue;

　　　　page1.vue

<Template>
<div> page1 value is: </ div>
</ Template>

},
}
</script>

</style>

　　　　page2.vue

<Template>
<div> page2 value is: </ div>
</ Template>

}
}
</script>

</ style>
　　Then we modify App.vue

<router-view></router-view>

</div>
</template>

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

import page1 from "./page1";
import page2 from "./page2";

const routes=[
{path:"/page1",component:page1},
{path:"/page2",component:page2}
]

const router=new VueRouter({
routes
})

export default router
　　finally Redistributes main.js in:

// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router.js'

Vue.config.productionTip = false

/ Eslint-NO-disable new new /
new new Vue ({
EL: '#app',
Router,
Components: the App {},
Template: '<the App />'
})
　　After completing the above preparation, we can see that the page results are as follows:

　　No error, we started the lesson Vue.mixin:

　　First, we create a new file called mixin folder in the src directory and create a file in mixin.js mixin file:

// throws mixed with objects, easy external access
Export mixin = const {
the Data () {
return {
Number The: 1
}
}
}
　　can see that we created a variable in the mix object, yes, format mixed with Vue instance of an object it's the same;

　　Then we can mixin.js introduced into our page1.vue and page2.vue in

　　page1.vue

<Template>
// value read here is actually a mixin value, because this time has been incorporated into the mixin vue example a
<div> page1 values are: Number {} {} </ div>
</ Template>

<Script>
// introduced mixin.js
Import {} from a mixin "./mixin/mixin"
Export default {
// Note here: attribute name mixins, is an array type
as mixins: [a mixin],
Data () {
return {

},
}
</script>

</style>
　　page2.vue

<Template>
<div> page2 values are: Number {} {} </ div>
</ Template>

}
}
</script>

</ style>
　　This time we mixed object has been successfully incorporated into the Vue instance, you can click on to see results, it can work properly and can read value;

　　Now let's modify page1.vue code:　

<Template>
<div> page2 values are: Number {} {} </ div>
</ Template>

}
}
</script>

</ style>
　　PAGE2 the same, then run can be found, the value of our page1.vue is executed mounted, there arises a self-energizing

　　Thus, we can know mixin mixed variable object is not shared; that is, you page1 has changed, and will not notice mixin real-time data refresh, change will only take effect in page1.vue, does not affect other components;

　　Now we modify the code mixin.js and page1.vue in:

　　mixin.js

export const mixin={
data(){
return {
number:1
}
},
created(){
console.log("mixin混入对象")
}
}
　　page1.vue

<Template>
<div> page1 values are: Number {} {} </ div>
</ Template>

},
Created () {
the console.log ( "here PAGE1");
}
}
</ Script>

</ style>
　　This time we run can be found in the console output looks like this:

　　Yes, mixin mixed object declares: If the same name is the hook function will be combined into an array, so they have been called, but the object is mixed hook fires before their instance hook;

　　 Target value options such methods, components, etc. If the variable name and the variable name conflict mixin mixed object, a component will be preferentially combined and recursion, the data corresponding to the component data directly covered with the same name in the mixin;

　　 We can modify the code mixin.js and page1.vue

　　 mixin.js

export const mixin={
data(){
return {
number:1
}
},
methods:{
demo1(){
console.log("mixin混入对象")
}
}
}

　　page1.vue

<Template>
<div> page1 values are: Number {} {} </ div>
</ Template>

</ style>
　　to run the code we can clearly see value in the implementation of all our components;

　　Because we vue in the instance variables are declared in the form of key-value pairs to declare, in fact, it is a target;

　　Global mixed:

　　　　We only need mixin.js global mixed into main.js then put into the mixin Vue.mixin () method can be;

/ eslint-disable no-new /
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

　　　Yes, the overall mix is more convenient, we will not declare at the time of sub-assemblies, mixing will affect the global instance of each component, used need to be careful; after such a global mix, we can directly in the assembly by this variable. / mixin variable mixing method to invoke the object / method;

　　Many students may have some questions to see here, this is not just Vuex almost Well, not really: the

　　mixin mixed difference between the object and the Vuex:

　　　　Vuex is state shared management, so all variables and methods are in Vuex can read and change and influence each other;

　　　　mixin can define variables or common method, but the data is not shared mixin, i.e. mixin instances of each component are not the same, are present in a single individual, the absence of interaction;

　　　　mixin mixed target value is a function of the same name function options will be merged into a recursive array, the two functions will be executed, but the first implementation of the same name in the mixin function;

　　　　Mixin named object is mixed in the object will be the object of replacement, are preferentially performed with the same name within the target assembly, i.e. the object with the same name within the cover assembly will be mixed into the object named object mixin

How to understand and optimize the work Vue.mixin

Guess you like