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 上的完整更改日志。