vite兼容
- require.context 替換成import.meta.globEager
- scss 全局注入，需要在vite.config.ts配置@use "sass:math"; @import "./src/amf/styles/variables.module.scss
- 靜態(tài)資源無(wú)法require脆贵，必須使用import
css預(yù)編譯處理語(yǔ)言
- 穿透css小渊，必須使用 :v-deep(.className){};
- :export在vite中不支持，可以修改成.module.scss
element-plus組件庫(kù)
- Icon 語(yǔ)法改為： <el-icon><edit /></el-icon> 或者直接使用svg<edit />
- 內(nèi)置組件中使用icon谒臼，需要單獨(dú)引入
import { Search } from '@element-plus/icons'
<el-button type="primary" :icon="Search">Search</el-button>
- dialog visible改為v-model
- Time-picker format格式修改YYYY-MM-DD HH:mm:ss ;defaluName變更朝刊；pickeroptions變更成shortcuts
vue3區(qū)別點(diǎn)
- 響應(yīng)式數(shù)據(jù)
- 3.0里Vue會(huì)使用帶有g(shù)etter和setter的處理程序遍歷data的所有property并將其轉(zhuǎn)換為proxy，proxy是一個(gè)包含另一個(gè)對(duì)象或函數(shù)并允許對(duì)其進(jìn)行攔截的對(duì)象蜈缤，返回的是對(duì)象本身拾氓，因此可以解決vue2里對(duì)象深層嵌套無(wú)法響應(yīng)的問(wèn)題。
- 通過(guò)ref和reactive創(chuàng)建響應(yīng)式引用
- 組合式API
- setup函數(shù)
- 接收兩個(gè)參數(shù)props底哥、context
- props不能解構(gòu)咙鞍，如果需要房官，可以使用toRefs
- 執(zhí)行setup時(shí)，組件實(shí)例尚未創(chuàng)建续滋，因此不能訪問(wèn)data翰守、methods等
- context對(duì)象包含attrs、slots吃粒、emit
- 在 setup() 內(nèi)部潦俺，this 不會(huì)是該活躍實(shí)例的引用，因?yàn)?setup() 是在解析其它組件選項(xiàng)之前被調(diào)用的徐勃，所以 setup() 內(nèi)部的 this 的行為與其它選項(xiàng)中的 this 完全不同事示。這在和其它選項(xiàng)式 API 一起使用 setup() 時(shí)可能會(huì)導(dǎo)致混淆。
- v-for 中的 Ref 數(shù)組
setItemRef(el) {
this.itemRefs.push(el)
}
- 異步組件defineAsyncComponent
- vue3.0不再通過(guò)promise創(chuàng)建異步組件肖爵，而是通過(guò)defineAsyncComponent顯式來(lái)定義臀脏，返回一個(gè)promise揉稚。
import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'
// 不帶選項(xiàng)的異步組件
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
// 帶選項(xiàng)的異步組件
const asyncPageWithOptions = defineAsyncComponent({
loader: () => import('./NextPage.vue'),
delay: 200,
timeout: 3000,
errorComponent: ErrorComponent,
loadingComponent: LoadingComponent
})
- 自定義指令directive
- 生命周期修改為與組件生命周期類似（beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted）搀玖。
- Data 選項(xiàng)
- data不再接收純object灌诅，唯一的聲明方法為:
import { createApp } from 'vue'
createApp({
data() {
return {
apiKey: 'a1b2c3'
}
}
}).mount('#app')
- mixin或extend合并時(shí)，不再進(jìn)行深度合并即舌，只執(zhí)行淺層次合并
- mixin 改為自定義hooks
- Events API
-
off 和 $once被廢棄芜飘。
- filter
- 3.0移除filter嗦明，使用computed或method
- 片段
- 3.0中組件支持多個(gè)根節(jié)點(diǎn)組件蚪燕。
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
- 函數(shù)式組件
- 不再需要functional：true參數(shù)奔浅。
- 使用普通函數(shù)創(chuàng)建诗良，加收兩個(gè)參數(shù)：props和context。其中context包含組件的attrs舞骆、slots径荔、emit。
- h改為vue全局導(dǎo)入
- attrs字段不再需要狈惫，所需要的屬性直接平鋪即可
- 示例
import { h } from 'vue'
const DynamicHeading = (props, context) => {
return h(`h${props.level}`, context.attrs, context.slots)
}
DynamicHeading.props = ['level']
export default DynamicHeading
- 全局 API
- createApp返回一個(gè)應(yīng)用實(shí)例胧谈。
import { createApp } from 'vue'
import MyApp from './MyApp.vue'
const app = createApp(MyApp)
app.mount('#app')
- config.ignoredElements替換為config.isCustomElement菱肖。
- 全局 API 只能作為 ES 模塊構(gòu)建的命名導(dǎo)出進(jìn)行訪問(wèn)蔑滓，nextTick、observable摹闽、version付鹿、compile蚜迅、set、delete等坐梯。
import { nextTick } from 'vue'
const plugin = {
install: app => {
nextTick(() => {
// ...
})
}
}
- key
- v-if/v-else/v-for不再必須指定key，Vue會(huì)自動(dòng)生成唯一的key刹帕。
- 按鍵修飾符
- KeyboardEvent.keyCode被廢棄谎替，因此3.0修飾符不再支持keycode和數(shù)字，可以使用修飾鍵的短橫線大小寫名稱钱贯。
- Slot 統(tǒng)一
- 統(tǒng)一普通slot和作用域slot，引用slot時(shí)侦另，他們被統(tǒng)一到$slots選項(xiàng)中。
- Teleport
- Teleport 提供了一種干凈的方法褒傅，允許我們控制在 DOM 中哪個(gè)父節(jié)點(diǎn)下呈現(xiàn) HTML弃锐，而不必求助于全局狀態(tài)或?qū)⑵洳鸱譃閮蓚€(gè)組件。
- 制定了teleport之后樊卓，即使子組件在不同的地方渲染，它仍將是父組件的的子級(jí)碌尔。
