当前位置：首页 > article >正文

Vue3.5正式发布带来了那些新特性？

article 2024/9/17 3:19:45

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>