vue3.5
发布于2024.9.4
更新内容如下:
一、useId
每个模块都可以从vue中引入一个useId,这个useId自动递增 不会重复 感觉也没啥用
<script setup>
import { useId } from 'vue'
const id = useId()
</script>
<template>
<form>
<label :for="id">Name:</label>
<input :id="id" type="text" />
</form>
</template>
二、usetempleteRef()
背景:在
3.5版本
之前只能通过ref的形式关联dom,因为ref
一般用于创建响应式数据,虽然规范上定义的时候会定义为xxRef
进行语义化的区分,当还不是很妥当那样会产生很多歧义,所以在3.5版本
正式推出新的定义方式usetempleteRef()
,使用方式和原来的ref
一致。注意要在onMounted
之后才能获取带dom
<template>
<div class="about">
<h1 ref="testdom">about</h1>
</div>
</template>
<script setup>
import { useTemplateRef,onMounted } from 'vue';
const hah = useTemplateRef('testdom')
onMounted(()=>{
//如果没有在onMounted中打印,将打印出null
console.log(hah.value);
})
</script>
三、父子直接响应式
背景:在3.5之前的版本中如果在父组件中定义的属性,通过props传入子组件,在子组件进行了解构赋值,那么此时将失去响应式,需要通过toRefs重新将数据变成响应式,那样是很麻烦的,所以在3.5中进行了优化迭代,使得props传入的数据直接自带响应式
<template>
<h1 >{{ count }}</h1>
</template>
<script setup>
import {watchEffect} from 'vue'
const {count} = defineProps(['count'])
watchEffect(()=>{
// 在vue3.5之前是监听不到数据的变化的
// 在3.5中,如果父组件中修改了count的值,那么在子组件中可以监听到数据的变化
console.log(count);
})
</script>