Vue 3.4 & 3.5 新功能大揭秘

Vue 3.4 & 3.5 新功能大揭秘

Vue.js 是一个广受欢迎的前端框架，自 2020 年 9 月发布 Vue 3.0 以来，Vue 团队持续为开发者带来新的特性和改进。Vue 3.4 和 Vue 3.5 的发布，带来了许多令人兴奋的新功能，本文将详细介绍这些新特性的亮点及其使用方法。

defineModel 简化双向绑定

在 Vue 3.4 中，defineModel 成为正式特性，这为组件的双向数据绑定提供了更简洁的解决方案。在 Vue 3.4 之前，要在子组件中实现 v-model，需要手动定义 props 和 emits，并在模板中使用特定的语法。例如：

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

<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
  />
</template>

而在 Vue 3.4 中，使用 defineModel 可以大大简化这个过程：

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

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

defineModel 会自动创建 modelValue 属性和 update:modelValue 事件，并在编译时将它们关联起来。这不仅减少了代码量，还降低了出错的可能性。此外，defineModel 还支持多个 v-model 的使用：

<script setup>
  const title = defineModel();
  const rating = defineModel('rating', { required: true });
</script>

<template>
  <input type="text" v-model="title" />
  <input type="number" v-model="rating" />
</template>

性能优化

Vue 3.4 对模板解析器进行了重写，速度提高了 2 倍。新的解析器使用基于 htmlparser2 的状态机分词器，仅需遍历模板字符串一次，显著提升了解析速度。此外，Vue 3.4 还对响应式系统进行了重构，提高了计算属性的重新计算效率。现在，只有当计算结果实际更改时，watchEffect 的回调才会被触发。

其他改进

Vue 3.4 还引入了 v-bind 的同名速记功能，可以将：

<img :id="id" :src="src" :alt="alt">

简化为：

<img :id :src :alt>

此外，Vue 3.4 还改进了水合不匹配错误的提示信息，使其更容易定位问题所在。

watch API 增强

Vue 3.5 对 watch API 进行了显著增强，新增了多个实用功能：

• deep 数字层级监控：现在可以指定监控对象的深度，而不是简单的布尔值。
• pause 和 resume 方法：允许开发者在需要时暂停和恢复监听。
• stop 方法：提供了更明确的取消监听方式。

这些新功能使得 watch API 更加灵活和强大，能够更好地满足复杂应用场景的需求。

响应式 props 支持解构

在 Vue 3.5 中，响应式 props 现在支持解构，这使得在 setup 函数中使用 props 更加方便：

const { prop1, prop2 } = defineProps(['prop1', 'prop2']);

新的生命周期钩子

Vue 3.5 引入了 onEffectClearup 和 onWatchClearup 两个新的生命周期钩子，分别在下一次执行 watchEffect 前和组件卸载前调用，以及在下一次执行 watch 前和组件卸载前调用。

新的实用工具函数

Vue 3.5 还添加了 useTemplateRef 和 useId 两个新函数，分别用于获取模板引用和生成唯一 ID。

suspense 和 teleport 优化

Vue 3.5 对 suspense 和 teleport 组件进行了优化，提升了性能和灵活性。teleport 组件现在支持 defer 属性，可以延迟传送内容的渲染。

Vue 3.4 和 Vue 3.5 的发布，为开发者带来了许多实用的新功能和性能优化。defineModel 的引入简化了双向数据绑定的实现，watch API 的增强提高了状态监听的灵活性，而模板解析器的重写和响应式系统的重构则显著提升了应用性能。这些新特性不仅提高了开发效率，还增强了代码的可维护性，使得 Vue.js 在前端开发中的竞争力进一步增强。