1、route/router的區(qū)別

● $route 表示當(dāng)前激活的路由的狀態(tài)信息，包含了當(dāng)前URL解析得到的信息，包含當(dāng)前的path路徑，params參數(shù)，query對象，name路徑名等屬性
● router.push()
● 獲取路由參數(shù)

import { useRoute,useRouter } from "vue-router"
//  useRoute 相當(dāng)于vue2中的this.$route(),表示當(dāng)前的路由對象
//  useRouter 相當(dāng)于vue2中的this.$router(),表示全局的路由對象
const route = useRoute()
const query=route.query  // 地址蘭參數(shù)
const prarams=route.params
// 使用router
const router = useRouter()
query=router.currentRoute.value.query
prarams=router.currentRoute.value.params

2、setup的調(diào)用時(shí)機(jī)

創(chuàng)建組件實(shí)例，然后初始化 props ，緊接著就調(diào)用setup 函數(shù)。從生命周期鉤子的視角來看，它會在 beforeCreate 鉤子之前被調(diào)用 但是在vue2.x版本中，是先執(zhí)行beforeCreatd 之后是setup再是created

3、reactive

● reactive() 會返回一個(gè)修改過的原始的對象，此行為與 Vue 2 中的 Vue.observable 一致，而在vue3中，reactive() 會返回一個(gè)新的的代理對象。
● 使用組合函數(shù)時(shí)必須始終保持對這個(gè)所返回對象的引用以保持響應(yīng)性。這個(gè)對象不能被解構(gòu)或展開，可以使用toRefsApi去解決這個(gè)問題

const user=reactive({name:'jake',age:28})
// 使用解構(gòu)
const {name,age}=toRefs(user)

4、ref

● 為什么通過ref申明的會有這個(gè)value？ 由于 JavaScript 中基礎(chǔ)類型是值傳遞而非引用傳遞，一個(gè)響應(yīng)式的值一旦作為 property 被賦值或從一個(gè)函數(shù)返回，而失去了響應(yīng)性之后，也就失去了用途。為了確保始終可以讀取到最新的計(jì)算結(jié)果，我們需要將這個(gè)值上包裹到一個(gè)對象中再返回。另外我們同樣需要劫持對這個(gè)對象 .value property 的讀/寫操作，現(xiàn)在我們可以通過引用來傳遞計(jì)算值，也不需要擔(dān)心其響應(yīng)式特性會丟失了。當(dāng)然代價(jià)就是：為了獲取最新的值，我們每次都需要寫 .value。
● 那為什么在template模板中，又不需要寫.value了呢？ 在渲染過程中，Vue 會直接使用其內(nèi)部的值，也就是說在模板中你可以把 {{ count.value }} 直接寫為 {{ count }} 。

5、script setup語法糖

● 自動注冊子組件
● 屬性和方法無需返回
● 支持props、emit和contex
setup script語法糖提供了三個(gè)新的API來供我們使用：defineProps、defineEmit和useContext

/** child.vue */
<template>  <div>{{ props.msg }}</div><a-button type="primary" @click="handleClick">emit</a-button>
</template>
<script lang="ts" setup>import { ref, reactive, onMounted } from 'vue';// propslet props = defineProps({msg: {type: String,default: ''}});// emitconst emit = defineEmits(['child-click']);function handleClick() {emit('child-click', 'child組件的回傳信息');}// 導(dǎo)出數(shù)據(jù)const childData = reactive({name: 'child',description: '這里是子組件的信息'});defineExpose({ childData });
</script>

/** main.vue */
<template><div>主頁面</div><div><Child ref="childRef" :msg="msg" @child-click="handleClick"></Child><hr /><div>來自child的值{{ childMsg }}</div><a-button type="primary" @click="getInstance">獲取實(shí)例</a-button></div>
</template>
<script lang="ts" setup>import Child from './child.vue';import { ref, reactive, onMounted, getCurrentInstance } from 'vue';const msg = ref('主頁面的props');let childMsg = ref<string>('');const handleClick = (res: string) => {childMsg.value = res;};// 獲取refFormconst childRef = ref();// 獲取實(shí)例const instance = getCurrentInstance();function getInstance() {console.log('log內(nèi)容getInstance', instance.refs['childRef'].childData);console.log('log內(nèi)容childRef', childRef.value.childData);}
</script>
<style lang="less" scoped></style>

6、createVNode

const message = {setup() {const num = ref(1)return {num}},template: `<div><div>{{num}}</div><div>這是一個(gè)彈窗</div></div>`}// 初始化組件生成vdomconst vm = createVNode(message)// 創(chuàng)建容器，也可以用已經(jīng)存在的const container = document.createElement('div')//render通過patch 變成domrender(vm, container)
// 彈窗掛到任何你想去的地方  
document.body.appendChild(container.firstElementChild)

6、v-model與update:value

/** main*/
<template><h3>pageTitle{{ pageTitle }}</h3><h4>obj:{{ obj.billNo }}--{{ obj.billEntity.billName }}</h4><hr /><child v-model:title="pageTitle" @emitFun="emitFun"></child>
</template><script lang="ts" setup>
import { ref, reactive } from 'vue';
import child from './child.vue';const pageTitle = ref('這是v-model:title');
const obj = reactive({billNo: '3333',billEntity: {billName: '單據(jù)名稱',remark: '備注'}
});
const emitFun = (data: any) => {Object.assign(obj, data);
};/**child*/
<template><input type="text" @input="setInput" /><a-input @input="setInput"></a-input><a-button type="primary" @click="setValue">調(diào)用update:value</a-button>
</template><script lang="ts" setup>
const emit = defineEmits(['update:title', 'emitFun']);
let props = defineProps({msg: {type: String,default: ''}
});
function setInput(val: any) {emit('update:title', val.target.value);
}
function setValue() {emit('emitFun', {billNo: '3333-5555',billEntity: {billName: '單據(jù)名稱child',remark: '備注child'}});
}
</script>

7、Suspense

Vue 3 中的Suspense特性允許你在異步組件加載時(shí)顯示占位符，這有助于提高用戶體驗(yàn)，同時(shí)減少了不必要的渲染。

8、Fragments（片段）

• Fragments 允許你在不引入額外的 DOM 元素的情況下，將多個(gè)子元素包裹在一個(gè)父元素中。這有助于減少 DOM 結(jié)構(gòu)的嵌套，使代碼更清晰和簡潔。
• 你可以使用 元素或 Vue 3 提供的特殊語法 v-fragment 來創(chuàng)建一個(gè) Fragment。
  下面示例中，<v-fragment> 包裹了兩個(gè) <p> 元素，但最終渲染的 DOM 結(jié)構(gòu)中并不會包含額外的父元素。

<template><div><p>Paragraph 1</p><p>Paragraph 2</p><v-fragment><p>Paragraph 3</p><p>Paragraph 4</p></v-fragment></div>
</template>

9、Teleport（傳送門）

• Teleport 允許你將組件的內(nèi)容渲染到 DOM 結(jié)構(gòu)的不同位置，而不受父組件的限制。這對于處理模態(tài)框、對話框、通知消息等需要在頁面的不同位置渲染的情況非常有用。
• 你可以在模板中使用 <teleport> 元素，并將其 to 屬性設(shè)置為一個(gè)目標(biāo)選擇器，以指定內(nèi)容應(yīng)該被渲染到哪個(gè) DOM 元素中。

<template><div><button @click="showModal">Show Modal</button><teleport to="#modal-container"><Modal v-if="isModalVisible" @close="closeModal" /></teleport></div>
</template>

在上面的示例中，Modal 組件的內(nèi)容會被渲染到頁面中具有 id=“modal-container” 的 DOM 元素內(nèi)部。