【Vue】Vue3.5 新特性
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 中关闭：
