vue3.4 新特性 defineModel() 宏

Vue 3.4 引入了一个新的 Composition API 宏：defineModel。这个宏允许开发者定义他们自己的自定义模型，这些模型可以用于响应式状态管理和其他复用逻辑。

defineModel 的基本用法如下：

import { defineModel } from 'vue-model'
 
export const useCounter = defineModel(() => {
  const count = ref(0)
 
  function increment() {
    count.value++
  }
 
  // 返回我们想要暴露的响应式属性和方法
  return { count, increment }
})

在 Vue 组件中使用这个自定义模型：

<template>
  <div>{{ counter.count }}</div>
  <button @click="counter.increment">Increment</button>
</template>
 
<script>
import { useCounter } from './path/to/useCounter'
 
export default {
  setup() {
    const counter = useCounter()
    return { counter }
  }
}
</script>

在这个例子中，我们创建了一个名为 useCounter 的模型，它包含一个可以递增的计数器。然后在 Vue 组件中，我们通过调用 useCounter 来使用这个模型，并将其返回的属性和方法绑定到模板中。这样就可以在多个组件之间共享和复用计数器逻辑。