vue3.5新特性整理

本文章介绍vue3.5更新的几个新特性

1.vue中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>

在 vue3.4 中watch 配置中还新增一个once 属性 只监听一次数据变化

watch(obj, (val)=> {
    console.log(val)
}, {
    deep: 2,
    once: true
})

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

基本使用

    之前的使用方式
    const inputDom = ref(null)
    <input value="" ref="inputDom" />
    获取dom
    inputDom.value.focus()
    
    
    3.5新增
    <template>
        <div>
            <input value="" ref="testRef" />
            <button @click="onHandler">获取焦点</button>
        </div>
    </template>
    <script setup lang="ts">
    import { useTemplateRef } from 'vue'

    const inputRef = useTemplateRef('testRef')

    const onHandler = () => {
        inputRef.value.focus()
    }

    </script>

3.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>

4.props 3.5之后新增一个比较好用的功能 对props解构

之前对 props 进行结构不能实现vue的响应式更新
并且对props 赋默认值需要使用 withDefaults 包裹有一点点麻烦 如果要想实现对props 结构需要使用 toRef/ toRefs

TestProps.vue
<template>
    <div>
        test props
        <p>msg: {{ msg }}</p>
        <p>count: {{ count }}</p>
    </div>
</template>
<script setup lang="ts" >
import { watch } from "vue"

const { msg, count } = defineProps<{
    msg: string,
    count: number
}>()


watch(()=> count, (val)=> {
    console.log(val)
})

</script>

Home.vue


<template>
  <main>
    <TestProps  :msg="msg" :count="count" />
    <button @click="onTest">test</button>

  </main>
</template>
<script setup lang="ts">
import TestProps from '../components/TestProps.vue'
import { ref } from 'vue'
let msg = ref<string>('21323123')
let count = ref<number>(1)
function onTest() {
  count.value ++
}
</script>

5. onWatcherCleanup 新增api

这个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> 

注意 如果使用setTimeout测试间隔时间不能小于200ms 如果小于200毫秒 setTimeout 中的打印语句还是会执行的

以上就是我对vue3.5 更新的新特性的整理 如有错误欢迎指出