vue 混入（Mixin）

vue中，混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

在vue2中，混入实现：

    // 定义一个混入对象  
var myMixin = {  
    created: function () {  
        this.hello()  
    },  
    methods: {  
        hello: function () {  
            console.log('hello from mixin!')  
        }  
    }  
}  
  
// 定义一个使用混入对象的组件  
var Component = Vue.extend({  
mixins: [myMixin]  
})  
  
var component = new Component() // => "hello from mixin!"

但在vue3中，官方不建议使用mixin进行逻辑复用, 而是推荐用组合式函数来替代。

官方案例：

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

// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)

  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  // 通过返回值暴露所管理的状态
  return { x, y }
}

    <script setup>
        import { useMouse } from './mouse.js'

        const { x, y } = useMouse()
    </script>

    <template>Mouse position is at: {{ x }}, {{ y }}</template>