data
页面中定义的 data 会覆盖 mixins 中同名的 data
created、mounted
先执行 mixins 中生命周期函数,再执行页面中的生命周期函数。
watch
先执行 mixins 中的 watch 监听,再执行页面中同名的 watch 监听。
computed
页面中定义的 computed 属性会覆盖 mixins 中同名的 computed 属性。
methods
页面中定义的 methods 覆盖mixins中同名的 methods 。
演示代码如下
页面 html 代码
<template>
<div>
<el-input v-model="value"></el-input>
<el-button type="primary" @click="onSubmit">submit</el-button>
<div>{{ text }}</div>
</div>
</template>
页面 js 代码
export default {
components: {
DetailsTab,
DataTab,
},
mixins: [testMixin],
data() {
return {
pageData: 'this is page data',
commonData: 'this is common data in page',
value: '',
}
},
watch:{
value() {
console.log('page watch value');
},
},
computed: {
text() {
const text = `The input value is ${this.value}, this text is from page computed`;
console.log(text);
return text;
},
},
created() {
console.log('page created');
},
mounted() {
console.log('page mounted');
console.log(this.pageData);
console.log(this.commonData);
console.log(this.mixinsData);
},
methods: {
onSubmit() {
console.log('page methods');
},
},
}
mixins 代码
export default {
data() {
return {
mixinsData: 'this is mixins data',
commonData: 'this is common data in mixins',
}
},
watch:{
value() {
console.log('mixins watch value');
},
},
computed: {
text() {
const text = `The input value is ${this.value}, this text is from mixins computed`;
console.log(text);
return text;
},
},
created() {
console.log('mixins created');
},
mounted() {
console.log('mixins mounted');
},
methods: {
onSubmit() {
console.log('mixins methods');
},
},
}