【vue3】vue3.5

vue3.5是9.1发布的，还挺热乎的，赶快学习起来！！！

组件属性结构解析赋值

组件属性结构解析赋值，高度提高开发体验，这个特性曾经在vue3.3提出过，然后3.4废弃，终于3.5稳定了。下面一起来看看怎么用的吧。

<script setup lang="ts">import { watch } from 'vue';// 自定义属性结构解析,可在结构解析时赋默认值const { count = 0, name = '张三' } = defineProps<{count: number;name: string;}>();// 监听自定义属性改变watch(() => count,(value) => {console.log('count', value);});
</script><template><div>{{ count }}</div><div>{{ name }}</div>
</template>

内置组件teleport优化

Teleport 可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去,但有一个局限，传送元素只能在目标元素后面,vue3.5给 Teleport 加了一个defer属性，可以忽略这个顺序。

<template>// 这里'传送'成功<div id="box1"></div><teleport to="#box1"><div>我系渣渣辉box1</div></teleport><teleport to="#box2"><div>我系渣渣辉box2</div></teleport>// 这里'传送'失败<div id="box2"></div><Teleport defer to="#box3"><div>我系渣渣辉box3</div></Teleport>// 这里'传送'成功<div id="box3"></div>
</template>

useTemplateRef

返回一个浅层 ref，其值将与模板中的具有匹配 ref attribute 的元素或组件同步。

<script setup lang="ts">import { ref, useTemplateRef } from 'vue';import Comp from './Comp.vue';// beforeconst domDiv = ref<HTMLDivElement>();// afterconst div = useTemplateRef('domDiv');const divInnerText = () => {div.value!.innerText = '张三6666';};// before// const comp = ref<HTMLDivElement>();// afterconst useTComp = useTemplateRef<{addNum: () => void;}>('comp');const addCompNum = () => {useTComp.value!.addNum();// comp.value.addNum();};
</script><template><div ref="domDiv"></div><button @click="divInnerText">innerText</button><Comp ref="comp"></Comp><button @click="addCompNum">comp num++</button>
</template>

onWatcherCleanup

注册一个清理函数，在当前侦听器即将重新运行时执行。只能在 watchEffect 作用函数或 watch 回调函数的同步执行期间调用 (即不能在异步函数的 await 语句之后调用)。这个让我想起了防抖,当然可以作为防抖来使用。

<script setup lang="ts">import { ref, watch, onWatcherCleanup } from 'vue';const num = ref(0);watch(() => num.value,(value) => {const timer = setTimeout(() => {// 按钮被点击停下后1秒后打印,一直点击则不触发,输入框同理console.log(value, '改变发生请求');}, 1000);onWatcherCleanup(() => {clearTimeout(timer);});});
</script><template><button @click="num++">num++</button>
</template>