vue3 defineModel

Vue3 中的 `defineModel` 是 Vue 3 框架提供的响应式数据创建工具，它是基于 `ref` 和 `reactive` 的封装升级版，用于更方便地管理组件状态。`defineModel` 提供了一种声明式的方式来定义模型（model），它简化了初始化、设置值以及处理变更的逻辑，并集成了一些额外的功能，比如深度观察（watch）、验证等。

以下是使用 `defineModel` 的基本步骤：

1. 定义一个响应式属性：

import { defineModel } from 'vue';

const MyComponent = {
  model: defineModel({
    // 数据名
    prop: {
      // 默认值，可选
      default: 'initial value',
      
      // 访问器函数，用于计算值
      get() {
        return ...;
      },
      
      // 设置函数，用于更新值
      set(value) {
        ... // 更新操作
      }
    },
    
    // 验证规则，可选
    validator(value) {
      return ...; // 返回布尔值判断是否有效
    }
  })
};

2. 使用这个模型：

<template>
  <div>{{ prop }}</div>
</template>

<script>
export default MyComponent;
</script>

当 `prop` 发生变化时，视图会自动更新并触发相应的验证规则。