Vue3.4 正式发布新功能 defineModel，终结双向绑定的所有烦恼

我们在使用 Vue 开发的时候，对 v-model 指令非常熟悉了，它提供了强大的双向绑定能力，是构建可复用表单组件的必不可少的属性。但是，在 <script setup> 风格的组件中实现一个自定义的 v-model，总免不了那几行“祖传”的样板代码，困扰着我们前端开发者。

好在，随着 Vue3.4 的正式发布，一个堪称“王炸”级的新功能 defineModel 帮我们解决了这一烦恼。

那些年我们写的 v-model 样板代码

在深入 defineModel 的魅力之前，让我们先回顾一下之前我们的使用。

假设我们要创建一个自定义的输入框组件 CustomInput.vue，并希望父组件能通过 v-model 绑定它的值。

在 Vue3.3 及以前，我们的代码通常是这样的：

父组件App.vue：

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'

const message = ref('Hello Vue')
</script>

<template>
  <CustomInput v-model="message" />
  <p>Current value: {{ message }}</p>
</template>

子组件 CustomInput.vue (旧版写法)

<script setup>
import{ computed } from 'vue'
// 1.声明 props，接收来自父组件的 modelValue
const props = defineProps({
    modelValue: {
        type: string,
        default: ''
    }
})
// 2.声明 emits，用于通知父组件更新值
const emit = defineEmits(['update:modelValue'])
// 3.使用 computed 创建一个可读写的计算属性
const value = computed({
    // getter 读取 prop 的值
    get() {
        return props.modelValue
    },
    // setter 在值改变时 emit 事件
    set(newValue) {
        emit('update:modelValue', newValue)
    }
})
</script>
<template>
    <input v-model='value" />
</template>

defineModel 闪亮登场

现在，我们使用 Vue 3.4 的 defineModel属性，上面的 CustomInput.vue 可以被简化成什么样？

子组件 CustomInput.vue (Vue 3.4+ 写法)：

<script setup>
// 1. 就这一行，没了！
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

这开发者体验简直是爽歪歪！从以前三件套的繁琐样板代码，到一行直观的声明，defineModel 给我们前端开发着带来了极致的简洁和优雅的体验。

以上关于Vue3.4 正式发布新功能 defineModel，终结双向绑定的所有烦恼的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。