Vue3.5 新特性

近日，Vue 3.5版本“天元突破红莲螺岩”正式发布。这一小版本引入了一系列非破坏性的内部改进及实用新功能，让前端开发者们备感振奋。此次更新不仅提高了响应式系统的性能，同时优化了内存占用，为用户带来了更流畅的开发体验。

新版本中最大亮点之一是对响应式系统的显著优化。在Vue 3.5中，内存占用减少了56%，而且系统的计算速度提升了10倍。这意味着，在处理大型和深度响应式数组时，开发者能够获得快速的反馈，大幅度提高了开发效率。同时，重构后的响应式系统消除了服务器端渲染(SSR)过程中由悬挂的计算属性所导致的计算延迟和内存问题，这将进一步增强应用的稳定性和可靠性。

1、响应式属性解构

以前defineProps解构出来的值并不是响应式，需要通过toRef这种工具来变成响应式.

现在vue3.5更新了这方面的不足，现在可以直接从defineProps解构出来的值就是响应式的了。

<template>  
  <div>  
    <p>count: {{ count }}</p>  
    <p>name: {{ obj.name}}</p>  
  </div>  
</template>  
  
<script setup>
// 使用defineProps来接收 
const { count,obj }= defineProps(['count']); 
console.log('count')   // 0
console.log('obj')   // 对象
</script>

2、新增useId()

useId() 是一个 API，用于生成在服务器和客户端渲染之间保持稳定的唯一应用程序 ID。这些 ID 可用于生成表单元素和无障碍属性的 ID

<script setup>
import { useId } from 'vue'

const id = useId()
</script>

<template>
......
</template>

3、useTemplateRef()

vue中之前响应式数据的定义和获取组件的示例都是用 ref 这个函数定义 vue3.5之后引入新的定义获取ref的函数 useTemplateRef

<script setup>
import {useTemplateRef,onMounted} from 'vue'
const divRef = useTemplateRef("div");
onMounted(() => {
  console.log(divRef.value);
});
</script>

<template>
  <div ref="div">我是div</div>
</template>

4、watch监听升级

主要针对深度监听进行了优化，之前deep 属性是一个boolean值 我们要监听对象的变化需要使用deep: true 在vue3.5之后 deep 也可以是一个number 表示对象要监听的层级数量 这个功能还是比较实用的 因为层级过深的时候我们可能需要监听数据所在层级没有那么什么就不需要全部监听 可以优化性能

<template>
    <div>
        <button @click="change">change</button>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
let obj = ref({
    a: {n1: 0,b: {n2: 0,c: {n3: 0,d: {n4: 0,e: { n5: 0}}}}}
})
watch(obj, (val)=> {
    console.log(val)
}, {
    deep: 2
})
const change = () => {
    obj.value.a = {
        q: 0
    }
}
</script>

5、onWatcherCleanup

这个api 也是优化watch 监听
如果要监听的属性变化很快而且我们在处理变化的之后的逻辑比较复杂 会很影响性能 之前处理这种操作可以使用防抖函数 现在vue 给我们提供了一种解决方法

<template>
    <div>
        {{ num }}
        <button @click="onTest">+1</button>
    </div>
</template>
<script setup lang='ts'>
import {ref, watch, onWatcherCleanup } from 'vue'

let num = ref<number>(0)

watch(num, (val) => {
    let timer = setTimeout(()=> {
        console.log(val)
    }, 1000) 

    onWatcherCleanup(()=> {
        clearTimeout(timer)
    })
})

const onTest = () => {
    num.value ++
}
</script> 

6、Teleport升级

Teleport 组件新增一个 defer属性，之前传送组件只能传送到 定义传送组件之前已经存在dom里面 现在新增这个defer属性 可以传送到 定义在传送组件后面的dom中

TestTeleport.vaue
<template>
    <div >
        <Teleport defer  to="#demo_1" >
            <div >teleport test </div>
        </Teleport>
        <!-- 加上defer 属性可以将Teleport 组件放到demo_1 结构下面 -->
        <div id="demo_1">
        </div>
    </div>
</template>

Home.vue
<template>
  <main>
    <!-- 组件渲染之前已经存在dom结构 -->
    <div id='test'></div>
    <TeleportDemo />
  </main>
</template>

7. Rolldown

vite 在新版本中可能会使用 Rolldown 来进行打包，它是一个由 Rust 开发的打包工具，你可以把它当做是一个 Rust 版本的 Rollup，目前已经兼容 Vite/Rollup 一半的插件，速度比 esbuild 更快！速度是 esbuild 的 1.2-1.5 倍！！

8. Vue Vapor

Vue Vapor，Vapor Mode 是 Vue 3 的一项革新特性，其设计灵感来自于 Solid.js。此特性通过优化代码编译成更高效的 JavaScript 来提高应用程序的性能。利用 Vapor Mode，开发者可以完全避免使用 Virtual DOM，这有助于减小应用的打包大小。

另外还有一些其他方面的功能更新，大家在开发中可以逐步的收集完善，Vue 3.5 带来了许多令人期待的新特性和优化，使得开发者能够更加高效地构建现代 Web 应用。通过掌握更新的新兴技术，开发者可以创建出性能更高、体验更好、维护更方便的应用。