Vue3中的混入（mixins）与（hooks）

在Vue 3中，混入(mixins)的概念被保留，但与之前版本的用法略有不同。混入(mixins)可以提供一种方式，让你可以在多个组件之间共享功能。

与此同时，Vue 3引入了Composition API，其中包含了一些新的概念，如setup函数、reactive、ref等，这些可以用来定义组件的逻辑。

下面是一个简单的例子，展示了如何在Vue 3中使用混入(mixins)和Composition API：

// 定义一个混入对象
const myMixin = {
  data() {
    return {
      mixinData: 'I am data from mixin',
    };
  },
  methods: {
    mixinMethod() {
      console.log('This is a method from mixin');
    },
  },
};
 
// 使用Composition API创建组件逻辑
function useMyLogic() {
  const componentData = 'I am data from component';
 
  function componentMethod() {
    console.log('This is a method from component');
  }
 
  return {
    componentData,
    componentMethod,
  };
}
 
// 定义组件
export default {
  mixins: [myMixin],
  setup() {
    // 使用混入和Composition API定义的函数
    const { mixinMethod } = myMixin;
    const { componentMethod } = useMyLogic();
 
    // 在setup函数中返回需要的响应式数据和方法
    return {
      mixinMethod,
      componentMethod,
    };
  },
};

在这个例子中，我们定义了一个混入对象myMixin，它有自己的数据和方法。我们还定义了一个使用Composition API的函数useMyLogic，它也有自己的数据和方法。然后在组件中，我们通过mixins数组引入了myMixin，并在setup函数中使用了useMyLogic函数。最后，我们在setup函数中返回了混入和Composition API定义的数据和方法，这样它们就可以在组件模板中使用了。