Vue3.5 新特性

大牧莫邪

于 2024-09-12 15:52:04 发布

阅读量325

点赞数 3

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/muwenbin_flex/article/details/142178350

版权

近日，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>