Vue3 混入学习笔记

什么是混入

Vue3 中，混入（mixin）是一种可复用组件逻辑的方式，类似于 Vue2 中的 mixin。使用混入可以将一些通用的逻辑封装起来，然后在不同的组件中进行复用。

如何使用混入

创建混入

在 Vue3 中，创建混入非常简单，只需定义一个对象，其中包含要混入的组件选项即可。例如：

javascriptCopy Code
const myMixin = {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

上述例子中，我们定义了一个名为 myMixin 的混入对象，其中包含了一个名为 data 的选项和一个名为 methods 的选项。

使用混入

有两种方式使用混入：

全局混入

要全局使用混入，只需在创建根实例之前通过 app.mixin() 方法进行注册即可。例如：

javascriptCopy Code
const app = Vue.createApp({})
app.mixin(myMixin)

这样，myMixin 中的逻辑就会被应用到每个组件中。

局部混入

要局部使用混入，只需在组件选项中通过 mixins 数组进行引用即可。例如：

javascriptCopy Code
const component = {
  mixins: [myMixin],
  // 组件其它选项
}

这样，myMixin 中的逻辑就会被应用到该组件中。

混入的实例

下面是一个具体的混入实例，其中混入了一个名为 myMixin 的对象，它包含了一个名为 log 的方法。然后，在 App 组件中通过局部混入使用了这个混入对象：

markdownCopy Code
```javascript
const myMixin = {
  methods: {
    log(message) {
      console.log(message)
    }
  }
}

const App = {
  mixins: [myMixin],
  mounted() {
    this.log('Mounted')
  }
}

在上述例子中，我们在 myMixin 中定义了一个 log 方法，它可以打印消息到控制台。然后，在 App 组件中局部混入了这个混入对象，并在 mounted 钩子中调用了 log 方法，输出了 Mounted 消息到控制台。