Vue3.5正式发布带来了那些新特性?
一、响应式属性解构
二、新增useId()
三、useTemplateRef()
四、内存改进(优化了响应速度)
Vue 3.5 作为 Vue.js 的一个更新版本,带来了一系列的新特性和改进。以下是对 Vue 3.5 新特性的一些介绍
一、响应式属性解构
以前defineProps解构出来的值并不是响应式,需要通过toRef这种工具来变成响应式,现在vue3.5更新了这方面的不足,现在可以直接从defineProps解构出来的值就是响应式的了。
代码如下(示例):
假设我们有一个父组件Son.vue,它要向子组件传递一个名为user的对象。
在子组件Son.vue中,我们使用defineProps来接收这个对象。
//父组件 App.vue
<template>
<div>
// 传数字和对象
<Son :count="count" :obj="obj"/>
<button @click="count++">count++</button> <br /> // 这变了,子组件也会变
<button @click="obj.name = '王五'">姓名变了</button> <br /> /
</div>
</template>
<script setup>
import { ref } from 'vue';
// 定义一个count 传基本数据类型
const count = ref(0)
// 传对象类型
const obj = ref({
name: "张三",
age: 18,
count: 0,
});
</script>
// 子组件 Son.vue
<template>
<div>
<p>count: {{ count }}</p>
<p>count: {{ obj.name}}</p>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
// 使用defineProps来接收
const { count,obj }= defineProps(['count']);
console.log('count') // 0
console.log('obj') // 对象
</script>
二、新增useId()
useId() 是一个 API,用于生成在服务器和客户端渲染之间保持稳定的唯一应用程序 ID。这些 ID 可用于生成表单元素和无障碍属性的 ID,并且可以在 SSR 应用程序中使用而不会导致水化不匹配:
代码如下(示例):
<script setup>
import { useId } from 'vue'
const id = useId()
</script>
<template>
//
</template>
三、useTemplateRef()
以前我们在获取dom元素都是用的ref属性,现在官方引出来这个函数来操作我们的dom.
代码如下(示例):
<script setup>
import {useTemplateRef,onMounted} from 'vue'
const divRef = useTemplateRef("div");
onMounted(() => {
console.log(divRef.value);
});
<script/>
<template>
<div ref="div">我是div</div>
</template>
四、内存改进(优化了响应速度)
实际上,Vue 团队特别优化了许多常见的数组方法,使得遍历数组的速度提高了很多,渲染速度变快了。更多细节可以去详细官方文档去看。
总结
以上就是今天要讲的内容,本文仅仅简单介绍了Vue3.5带来的新特性新功能。