vue
中mixin
用法是一大利器,可以方便我们将组件中共同的代码抽离出来,提高代码复用性。但是mixin
在vue3
中有些许不同,让我们看一下变化:
1. vue3中data的变量对比是浅层次的
// app.vue
<script>
import Mixins from "./mixin.js";
export default {
name: "App",
mixins: [Mixins],
data() {
return {
user: {
id: 1,
},
};
},
created() {
/**
* vue2 user: {id: 1,name: "Jack"}
* vue3 user: {id: 1}
*/
console.log(this.user);
console.log("App created");
},
};
</script>
// mixin.js
export default {
data() {
return {
user: {
id: 1,
name: "Jack",
}
}
},
created() {
console.log("mixin created");
},
}
在app.vue
中,我们在data
中定义了一个变量user
,在mixin
中也定义了一个变量user
,同时在created
中打印变量user
。在vue2
中,user
变量更新为 {id: 1, name: "Jack"}
,而在vue3
中user
变量更新为{id: 1}
。这是由于在vue3
中,对data
中的变量对比是浅层次的。这种做法可以避免开发者在mixin
中定义了和vue
组件中同名的变量,如果是对象类型,进行了深层对比合并后导致代码可读性变差和bug难以定位。
2. 生命周期minxin行为是相同的
在上面的代码中,我们在app.vue
的created
打印了console.log("App created")
,同时在mixin.js
的created
打印了console.log("mixin created")
。最后代码运行后依次执行console.log("mixin created")
和console.log("App created")
,这在vue2
和vue3
中的相同的。