(五)vue3之mixin

本文解析了Vue 3中mixin的使用新特性,如浅层数据合并避免深层冲突,并说明了创建生命周期方法在Vue 2和3中的行为一致。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vuemixin用法是一大利器,可以方便我们将组件中共同的代码抽离出来,提高代码复用性。但是mixinvue3中有些许不同,让我们看一下变化:

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"},而在vue3user变量更新为{id: 1}。这是由于在vue3中,对data中的变量对比是浅层次的。这种做法可以避免开发者在mixin中定义了和vue组件中同名的变量,如果是对象类型,进行了深层对比合并后导致代码可读性变差和bug难以定位。

2. 生命周期minxin行为是相同的

在上面的代码中,我们在app.vuecreated打印了console.log("App created"),同时在mixin.jscreated打印了console.log("mixin created")。最后代码运行后依次执行console.log("mixin created")console.log("App created"),这在vue2vue3中的相同的。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值