Vue 3.3 逆天新特性-defineModel

首选我们要明白，为什么要使用到defineModel呢？假设有这样一种场景：子组件传递给父组件数据，并且实时更改。那么我们知道大概思路就是子组件使用defineEmits和defineProps来，但是这样很复杂，代码很多重复，实时更换让我们想到了v-model，所以我们就需要用到defineModel了。具体操作如下：

v-model和子组件进行数据双向绑定

• 父组件

	<!-- Father.vue -->
	<template>
	  <span>count</span>
	  <Child v-model="count" />
	</template>
	
	<script lang="ts" setup>
	  import { ref } from 'vue'
	  const count = ref<number>(0)
	</script>

• 子组件（以往使用defineProps 和 defineEmits)

	<!-- Child.vue -->
	<template>
	  count: {{ count }}
	  <button @click="onClick">count</button>
	</template>
	
	<script lang="ts" setup>
	  const $props = defineProps<{ modelValue: number }>()
	  const $emits = defineEmits<{
	    (e: 'update:modelValue', modelValue: number)
	    // 注册update:modelValue事件，作为状态更新的回调
	  }>()
	  function onClick() {
	    $emits('update:modelValue', $props.modelValue++)
	    // 状态更新时发布事件
	  }
	</script>

v-model和子组件进行数据双向绑定

• 父组件（还是一样）

	<!-- Father.vue -->
	<template>
	  <span>count</span>
	  <Child v-model="count" />
	</template>
	
	<script lang="ts" setup>
	  import { ref } from 'vue'
	  const count = ref<number>(0)
	</script>

• 子组件（现在使用defineModel)

	<!-- Child.vue -->
	<template>
	  count: {{ count }}
	  <button @click="onClick">count</button>
	</template>
	
	<script lang="ts" setup>
	  import {defineModel} from 'vue'
	  const count = defineModel<number>()
	  // 一步到位，完成事件注册和监听状态变化并发布事件
	  function onClick() {
	    count += 1
	  }
	</script>

目前使用defineModel还是在实验阶段，因此还需要vite.config.js中开启，后面版本更新之后，或许就不再需要了。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins:[
        vue({
            script:{
                // 开启defineModel配置
                defineModel:true
            }
            }
        })
    ]
})