探讨 Vue 3.5 中的一些关键更新。
1. 响应式属性解构
在 Vue 3.5 中，从 props 和 emits 中解构出来的属性默认就是响应式的。这意味着你不再需要手动使用 toRefs 或 toRef 来使解构的属性具有响应性。例如：
import { defineComponent } from 'vue';
export default defineComponent({
props: ['myProp'],
setup(props) {
const { myProp } = props; // 直接解构，myProp 是响应式的
return { myProp };
}
});
2. 新增 useId() API
useId() 是一个非常有用的 API，它能够生成一个全局唯一的 ID，并且在服务端渲染（SSR）和客户端渲染（CSR）时保持一致。这对于生成动态组件的 ID 和 ARIA 标签特别有用。
import { useId } from 'vue';
export default {
setup() {
const id = useId();
return { id };
}
};
3. 新增 useTemplateRef() 函数
useTemplateRef() 是一个新的实用函数，它允许你在模板中引用 DOM 元素，并在组件实例中访问它们。这有助于处理那些需要直接操作 DOM 的场景。
import { useTemplateRef } from 'vue';
export default {
setup() {
const inputRef = useTemplateRef('myInput');
return { inputRef };
},
template: `
<input ref="myInput" />
`
};
4. 性能优化
Vue 3.5 在性能方面做了一些重要的优化：
- 内存占用减少：响应式系统中的内存占用减少了大约 56%。
- 数组操作性能提升：在处理大型数组时，计算速度提高了大约 10 倍。
这些改进使得 Vue 在处理复杂数据结构和大量数据时更加高效。
5. 数组方法优化
许多数组操作方法（如 push, pop, shift, unshift, splice, sort, reverse）得到了优化，以提高遍历时的性能。
6. SSR 中的计算属性问题修复
在 SSR 场景下，计算属性的重新计算可能导致延迟和内存问题。Vue 3.5 重构了这部分逻辑，解决了这些问题，提升了 SSR 的稳定性和效率。
7. 非破坏性变更
Vue 3.5 是一个非破坏性的更新，现有的 Vue 3 应用可以平滑地迁移到新版本，而不需要大量的代码更改。
8. 其他内部改进
除了上述主要更新外，Vue 3.5 还包括了一系列内部改进，如：
- 更好的错误消息。
- 更简洁的类型定义。
- 提升的开发工具支持等。
官网链接