Nevermind

Vue 3.4 更新：v-bind 写法更简洁，性能再提升

4 min

1. Vue 3.4 “Slam Dunk” 简介

在 2024 年初，Vue 团队发布了 3.4 版本，代号 “Slam Dunk”。这次更新虽然不是像 3.0 那样颠覆性的版本，但它在两个关键领域带来了重要改进：内部性能优化 和 开发者体验提升。

其中，最引人注目的变化包括重写的响应式系统、稳定的 defineModel API，以及更简洁的 v-bind 语法。

2. 响应式系统重构

Vue 3.4 对其核心的响应式系统进行了大规模重构。这次重构的主要目标是提升 computed 计算属性的效率。

在旧版本中，即使计算属性的依赖没有实际发生变化，它也可能会被不必要地重新计算。新版本通过更智能的依赖追踪，确保了只有在真正需要时才会触发计算，从而减少了不必要的组件重渲染。

对于大部分开发者来说，这是一个“免费的午餐”——你无需修改任何代码，升级到 3.4 版本后就能自动享受到性能的提升。

3. defineModel：优雅的组件双向绑定

在 3.4 版本之前，要在组件上实现类似 v-model 的双向绑定，需要编写相当多的样板代码：

之前 👎:

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

// 通常需要一个计算属性来包装
const value = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})
</script>

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

Vue 3.4 将 defineModel API 从实验性阶段转为正式稳定。现在，实现上述功能只需要一行代码：

现在 (Vue 3.4) 👍:

<script setup>
const model = defineModel()
</script>

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

defineModel 宏会自动注册 modelValue prop 和 update:modelValue 事件，并返回一个可直接读写的 ref。这极大地简化了支持 v-model 的组件的开发。

4. v-bind 同名属性简写

另一个提升开发体验的语法糖是 v-bind 的同名简写。当传递给组件的 prop 和你在 <script setup> 中定义的变量同名时，现在可以省略属性值。

之前 👎:

<script setup>
const id = 'my-id'
const title = 'Hello Vue'
</script>

<template>
  <MyComponent :id="id" :title="title" />
</template>

现在 (Vue 3.4) 👍:

<script setup>
const id = 'my-id'
const title = 'Hello Vue'
</script>

<template>
  <MyComponent :id :title />
</template>

这个小改动让模板代码变得更加清爽和易读。

结论

Vue 3.4 是一次扎实的迭代。它通过底层的性能优化和上层的 API 简化，进一步巩固了 Vue 作为-个“渐进式”框架的理念——既为大型应用提供了强大的性能保障，也为日常开发带来了实实在在的便利。特别是 defineModel 的稳定，解决了长期以来组件封装中的一个痛点，是本次更新中最值得称赞的亮点。

Vue Vue3 Release Reactivity