- vite
vite 是一個(gè)基于 Vue3 單文件組件的非打包開發(fā)服務(wù)器悄晃，它做到了本地快速開發(fā)啟動(dòng)靡菇。
創(chuàng)建一個(gè)vue的項(xiàng)目可以用vite創(chuàng)建
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
//或者
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev
（1）快速的冷啟動(dòng)便斥，不需要等待打包操作饶火；
（2）即時(shí)的熱模塊更新鹏控，替換性能和模塊數(shù)量的解耦讓更新飛起；
（3）真正的按需編譯肤寝，不再等待整個(gè)應(yīng)用編譯完成当辐，這是一個(gè)巨大的改變。
- Composition API
Composition API字面意思是組合API鲤看，它是為了實(shí)現(xiàn)基于函數(shù)的邏輯復(fù)用機(jī)制而產(chǎn)生的
基本使用
setup() {
//setup 函數(shù)是一個(gè)新的組件選項(xiàng)缘揪。作為在組件內(nèi)使用 Composition API 的入口點(diǎn)
//此函數(shù)沒(méi)有created和beforeCreated
//與counter相關(guān)的
const {counter, doubleCounter} = useCounter()
//單值響應(yīng)式 ref: 接受一個(gè)參數(shù)值并返回一個(gè)響應(yīng)式且可改變的 ref 對(duì)象。ref 對(duì)象擁有一個(gè)指向內(nèi)部值的單一屬性 .value。
const msg1 = ref('我是單值 message')
const modalOpen = ref(false)
return {counter, doubleCounter, msg1, modalOpen}
},
function useCounter() {
//多值響應(yīng)式 reactive: 接收一個(gè)普通對(duì)象然后返回該普通對(duì)象的響應(yīng)式代理寺晌。等同于 2.x 的 Vue.observable()
const data = reactive({
counter: 1,
doubleCounter: computed(() => data.counter * 2)
})
let timer;
onMounted(() => {
timer = setInterval(() => {
data.counter++
}, 1000)
})
onUnmounted(() => {
clearInterval(timer)
})
// toRefs 是針對(duì)整個(gè)對(duì)象的所有屬性世吨，目標(biāo)在于將響應(yīng)式對(duì)象（ reactive 封裝）轉(zhuǎn)換為普通對(duì)象
return toRefs(data)
}
- teleport
Teleport 是一種能夠?qū)⑽覀兊哪０逡苿?dòng)到 DOM 中 Vue app 之外的其他位置的技術(shù)，就有點(diǎn)像哆啦A夢(mèng)的“任意門”
場(chǎng)景：像 modals,toast 等這樣的元素呻征，很多情況下耘婚，我們將它完全的和我們的 Vue 應(yīng)用的 DOM 完全剝離，管理起來(lái)反而會(huì)方便容易很多陆赋，原因在于如果我們嵌套在 Vue 的某個(gè)組件內(nèi)部沐祷，那么處理嵌套組件的定位、z-index 和樣式就會(huì)變得很困難攒岛。
<template>
<!-- to 屬性就是目標(biāo)位置 -->
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div> 這是一個(gè)模態(tài)窗口! 我的父元素是"body"!
<button @click="changeModel()">Close</button>
</div>
</div>
</teleport>
</template>
4 .fragments
一個(gè) Vue 模板可以有多個(gè)根節(jié)點(diǎn), 3.0之前一個(gè)vue模板只有一個(gè)根節(jié)點(diǎn)
<template>
<div>fragment1</div>
<div>fragment2</div>
<div>fragment3</div>
</template>
5.Emits
Vue官方建議我們?cè)诮M件中所有的emit事件都能在組件的emits選項(xiàng)中聲明
emits參數(shù)有倆種形式對(duì)象和數(shù)組赖临，對(duì)象里面可以配置帶校驗(yàn)emit事件，為null的時(shí)候代表不校驗(yàn)灾锯，校驗(yàn)的時(shí)候兢榨，會(huì)把emit事件的參數(shù)傳到校驗(yàn)函數(shù)的參數(shù)里面
當(dāng)校驗(yàn)函數(shù)不通過(guò)的時(shí)候，控制臺(tái)會(huì)輸出一個(gè)警告顺饮，但是emit事件會(huì)繼續(xù)執(zhí)行
<template>
<button @click="handleClick">點(diǎn)擊emit-不校驗(yàn)事件</button>
<button @click="handleOpen">點(diǎn)擊emit-校驗(yàn)事件</button>
</template>
<script>
export default {
props: {
},
//emits 寫自定義事件 作用 比較清晰知道該組件有那些自定義事件
emits: {
click: null,//click事件沒(méi)有檢驗(yàn)
open: (value) => {
if (typeof value === "string") {
return true;
} else {
return false;
}
},
},
created(){
},
data() {
return {
}
},
methods:{
handleClick(){
this.$emit("click");
},
handleOpen(){
this.$emit("open", 1);
},
}
};
</script>
