vue 中 mixin 和 composable 对比

在 Vue 中，mixin 是一种分发 Vue 组件中可复用功能的非常灵活的方式。你可以把多个组件中公用的逻辑抽离出来，然后通过 mixin 的方式“混入”组件中，减少代码重复。

---

🌟 基本使用方式

定义一个 mixin：

// myMixin.js
export const myMixin = {
  data() {
    return {
      message: 'Hello from mixin!'
    }
  },
  created() {
    console.log('mixin created')
  },
  methods: {
    greet() {
      console.log(this.message)
    }
  }
}

在组件中使用它：

<script>
import { myMixin } from './myMixin'

export default {
  mixins: [myMixin],
  created() {
    console.log('component created')
  }
}
</script>

控制台输出顺序是：mixin created → component created

---

🧠 特点与合并规则

1. 生命周期钩子：多个 created 等生命周期函数会依次调用，先执行 mixin 里的，再执行组件里的。

2. data：data 会进行合并，如果有重名属性，组件内的会覆盖 mixin 的。

3. methods、computed、components：这些会合并，同名的会被组件自身的覆盖。

---

✅ 使用场景

• 多个组件都有类似的逻辑，比如页面滚动监听、数据格式化、权限控制等。

• 封装一些通用逻辑，比如 API 调用、表单校验等。

---

⚠️ 注意事项

虽然 mixin 很方便，但当项目变大、混入过多时会导致：

• 来源不明确，不好追踪逻辑。

• 属性冲突难排查。

所以在 Vue 3 中，推荐使用 组合式 API（Composition API） 来代替 mixin，用 setup + 自定义 hooks 会更清晰、可维护。

在 Vue 3 中，推荐用 Composition API 替代 mixin，主要是为了让逻辑更加清晰、可组合、可复用。

---

✅ 推荐做法：使用组合式 API + 自定义 composable（逻辑抽离）

Vue 3 不再推荐 mixins，而是鼓励用 组合式 API（setup()）+ 可组合函数（composables） 来实现逻辑复用。

---

🧩 示例：用 composable 替代 mixin

🎯 目标：封装一个“窗口宽度监听”的逻辑（原本可能会写在 mixin 中）

---

✅ 新写法（推荐的 Vue 3 用法）

// useWindowSize.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useWindowSize() {
  const width = ref(window.innerWidth)
  const height = ref(window.innerHeight)

  const update = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight
  }

  onMounted(() => {
    window.addEventListener('resize', update)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', update)
  })

  return { width, height }
}

在组件中使用：

<script setup>
import { useWindowSize } from './useWindowSize'

const { width, height } = useWindowSize()
</script>

<template>
  <div>宽度：{{ width }}，高度：{{ height }}</div>
</template>

---

✅ 优势对比

特性	mixin	composable
可读性	🌧 多个来源混入，逻辑分散	☀️ 函数式封装，清晰独立
逻辑复用	有，但容易命名冲突	强，命名作用域明确
调试方便	否，逻辑混乱	是，函数调用链清晰
类型推导	差（TS 支持弱）	好，TS 友好

---

✨ 常用内置组合式 API

功能	API
生命周期	onMounted, onUpdated, onUnmounted, onBeforeMount, 等
响应式	ref, reactive, computed, watch, watchEffect
依赖注入	provide, inject
DOM 绑定	onMounted + ref