Vue 3.5新特性

Vue3.5新特性加粗样式

就在昨天，尤大叕更新了，大概更新了以下内容

• 响应式重构。性能提升了，内存使用率下降了（56%），使用方面没有变化。
• 响应式 props 解构
• 新增 useTemplateRef 函数
• 新增 useId 函数

1、props 解构，在之前，我们从 props 中解构出来的是不具备响应式的，需要具备响应式解构需要用到 toRefs 方法包装 props进行解构，而3.5之后，就无需 toRefs 包装了。

// 父组件
<template>
  <div class="content">
    <el-input v-model="value" style="width: 300px" />
    <Child :data="value" />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Child from "./components/Child.vue";
const value = ref("monkey");
</script>



// 子组件
<template>
  <div>
    child值：
    <span style="color: red">{{ data }}</span>
  </div>
</template>

<script setup>
import { watchEffect } from "vue";
const { data } = defineProps(["data"]);   //  仍具备响应式
watchEffect(() => {
  console.log("data", data);
});
</script>

2、 useTemplateRef 函数，在之前，我们获取 dom 节点需要给 dom 绑定上一个ref=‘refKey’， 然后再用一个ref定义一个空的响应式属性赋值给这个refKey。 如下所示

<template>
  <div class="content" ref='myNode'>dom</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Child from "./components/Child.vue";
const value = ref("monkey");
const myNode = ref(null)
onMounted(()=>{
	console.log(myNode)    // 拿到 dom 节点
})
</script>

而现在，有了 useTemplateRef 函数，我们可以更好的区分响应式属性和 dom 节点，不像之前响应式属性和dom节点都是通过ref定义和获取。

useTemplateRef 用法如下

<template>
  <span style="color: red" ref="myNode">是我</span>
</template>

<script setup>
import { useTemplateRef } from "vue";
const node = useTemplateRef("myNode");    // 这里定义的接收dom节点的变量无需和ref一样，随便定义接收

onMounted(()=>{
	console.log(node)    // 拿到 dom 节点
})
</script>

3、 useId函数，目的是为每一个 vue 文件创建一个唯一的id，并保证在服务器和客户端渲染中保持稳定，可用于生成表单元素和可访问性属性的 ID，如下所示

<template>
 <label :for="id">点我也能聚焦</label>
 <!-- vue3.4同名简写 -->
 <input :id type="text" placeholder="Enter text here">  
</template>

<script setup>
import { useId } from "vue";
const id = useId();   
console.log(id)     // v:0

</script>

有关 3.5 中的更改和功能的完整列表，请查看GitHub 上的完整更改日志。