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

vue3.5更新内容

news 来源：原创 2025/4/30 6:20:30

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>