vue3的混入组合式
混入是一种复用组件逻辑的方式，在 Vue2 中通过在组件中定义一个对象来实现。但是在组件较多或逻辑较复杂时，这种方式会导致命名冲突和代码冗长等问题。
Vue3 中提供了一种新的混入方式，即组合式 API。组合式 API 允许将组件逻辑归组到可复用的功能性组合中。
组合式 API 是通过 Vue 提供的 `setup` 函数来实现的。`setup` 函数在组件创建时执行，并且它不需要返回数据或方法给模板渲染使用，而是直接在组件内使用。
下面是一个简单的组合式 API 例子：
```javascript
import { reactive } from 'vue'
function useCounter(initCount) {
  const state = reactive({
    count: initCount
  })
  function increment() {
    unt++
  }
  return {
    state,
    increment
  }
}
export default {
  setup() {
    const counter1 = useCounter(0)
    const counter2 = useCounter(10)
    return {
      counter1,
      counter2
    }
  }
}
```vue中reactive
可以看到，这个组合式 API 的 `useCounter` 函数实现了一个简单的计数器逻辑，并返回了带有 `state` 和 `increment` 方法的对象。
在组件中使用 `useCounter` 函数时，通过调用 `setup` 函数来获取组合实例，并返回一个包含所有计数器实例的对象。
在模板中使用计数器时，只需要访问 `unt` 或者 `counter1.increment` 就可以执行计数器逻辑了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。