(五)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中的相同的。

### Vue3 中使用 Mixin 的方式 尽管在 Vue 3 中官方更倾向于推荐使用组合式 API (Composition API),混入(Mixin)依然作为一种可行的选择存在,适用于特定场景下的代码复用需求[^1]。 #### 创建并应用 Mixin 实现代码共享功能 为了展示如何创建和利用 Mixin,在下面的例子中定义了一个简单的 `myMixin` 对象,该对象内含有一个生命周期钩子函数 (`created`) 和一个自定义的方法 (`sayHello`). 这些属性将会被注入到任何使用此 Mixin 的组件实例之中. ```javascript // my-mixin.js 文件内容如下: import { defineComponent } from &#39;vue&#39;; export const myMixin = { created() { console.log(&#39;mixin hook called&#39;); }, methods: { sayHello(name) { alert(`Hello ${name}`); } } }; ``` 接着在一个新的 Vue 组件里导入上述定义好的 Mixin 并通过 `mixins` 属性将其注册进去: ```javascript // MyComponent.vue 文件内容如下: <template> <div @click="sayHello(&#39;World&#39;)">Click me</div> </template> <script setup> import { defineComponent } from "vue"; import { myMixin } from &#39;./path/to/my-mixin&#39;; export default defineComponent({ name: &#39;MyComponent&#39;, mixins: [myMixin], }); </script> ``` 当点击页面上的 div 元素时会触发来自 Mixin 的 `sayHello()` 方法,并弹窗显示问候语句;同时由于配置了 `created` 生命周期钩子,则每当这个组件初始化完成的时候都会打印一条日志消息至控制台。 需要注意的是,虽然这种方式能够有效地促进代码片段之间的重复利用,但由于其作用范围较广以及可能引发命名冲突等问题,因此建议谨慎选用。对于大多数情况而言,采用 Composition API 来构建更具模块化特性的应用程序可能是更为理想的做法.
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值