useId
为 每一个 vue 文件创建一个唯一的 id：
app.vue
import {useId} from "vue";
import Child from "@/Child.vue";
const comId = useId();
console.log("=>(App.vue:5) comId", comId);
// ...
<Child />
useTemplateRef
useTemplateRef 是对 ref 对 dom 获取或者组件实例的一个改动，以便区分使用 ref 获取响应式数据和 dom。
<script setup>
import {onMounted, useTemplateRef} from "vue";
const myDom = useTemplateRef('dom1')
onMounted(() => {
console.log(myDom.value)
})
</script>
<template>
<div ref="dom1">1111</div>
</template>
解构的数据还具有响应式
<script setup>
import {ref} from "vue";
import Child from "@/Child.vue";
const data = ref(0)
const addData = () => {
data.value++
}
</script>
<template>
<Child :data="data"></Child>
<button @click="addData()">addData</button>
</template>
<script setup>
// 解构的数据只读且具有响应式
import {watchEffect} from "vue";
const {data} = defineProps(['data'])
console.log("=>(Child.vue:7) data", data);
watchEffect(() => {
console.log("=>(Child.vue:9) data", data);
})
</script>
<template>
{{data}}
</template>
如果不想使用该功能，也可以在 vite.config.js 中关闭：
