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

vue3.5新特性整理

news 来源：原创 2024/9/20 4:45:16

本文章介绍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" />获取dominputDom.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>