Vue 3.4 Update: Simpler v-bind Syntax and Better Performance

1. Introducing Vue 3.4 “Slam Dunk”

At the beginning of 2024, the Vue team released version 3.4, codenamed “Slam Dunk.” Although this release is not as revolutionary as version 3.0, it brings important improvements in two key areas: internal performance optimization and developer-experience improvements.

The most notable changes include a rewritten reactivity system, the stable defineModel API, and more concise v-bind syntax.

2. Reactivity-System Rewrite

Vue 3.4 includes a major rewrite of its core reactivity system. The primary goal of this work is to improve the efficiency of computed properties.

In previous versions, a computed property could be recalculated unnecessarily even when its dependencies had not actually changed. With smarter dependency tracking, the new version ensures that computation is triggered only when it is genuinely needed, reducing unnecessary component rerenders.

For most developers, this is a “free lunch”: no code changes are required, and upgrading to version 3.4 provides the performance improvement automatically.

3. defineModel: Elegant Two-Way Binding for Components

Before version 3.4, implementing v-model-style two-way binding on a component required a fair amount of boilerplate:

Before 👎:

<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 moves the defineModel API from experimental status to a stable release. The same behavior now takes just one line of code:

Now (Vue 3.4) 👍:

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

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

The defineModel macro automatically registers the modelValue prop and the update:modelValue event, then returns a directly readable and writable ref. This greatly simplifies the development of components that support v-model.

4. Same-Name Shorthand for v-bind

Another syntax improvement for developer experience is same-name shorthand for v-bind. When a prop passed to a component has the same name as a variable defined in <script setup>, you can now omit the attribute value.

Before 👎:

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

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

Now (Vue 3.4) 👍:

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

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

This small change makes template code cleaner and easier to read.

Conclusion

Vue 3.4 is a solid iteration. Through low-level performance optimization and high-level API simplification, it further reinforces Vue’s philosophy as a “progressive” framework—providing strong performance guarantees for large applications while delivering practical convenience in everyday development. The stabilization of defineModel is especially valuable: it resolves a long-standing pain point in component encapsulation and is the most praiseworthy highlight of this release.