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';
// before
const domDiv = ref<HTMLDivElement>();
// after
const div = useTemplateRef('domDiv');
const divInnerText = () => {
div.value!.innerText = '张三6666';
};
// before
// const comp = ref<HTMLDivElement>();
// after
const 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>