vue2升級(jí)vue3注意事項(xiàng)

vite兼容

  1. require.context 替換成import.meta.globEager
  2. scss 全局注入,需要在vite.config.ts配置@use "sass:math"; @import "./src/amf/styles/variables.module.scss
  3. 靜態(tài)資源無(wú)法require脆贵,必須使用import

css預(yù)編譯處理語(yǔ)言

  1. 穿透css小渊,必須使用 :v-deep(.className){};
  2. :export在vite中不支持,可以修改成.module.scss

element-plus組件庫(kù)

  1. 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> 
  1. dialog visible改為v-model
  2. 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ù)組
    • 結(jié)合可以為ref單獨(dú)綁定
      • 示例

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
    • on顽聂,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í)碌尔。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末唾戚,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子募书,更是在濱河造成了極大的恐慌绪囱,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件篮赢,死亡現(xiàn)場(chǎng)離奇詭異齿椅,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)启泣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門涣脚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人寥茫,你說(shuō)我怎么就攤上這事遣蚀。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵妙同,是天一觀的道長(zhǎng)射富。 經(jīng)常有香客問(wèn)我,道長(zhǎng)粥帚,這世上最難降的妖魔是什么胰耗? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮芒涡,結(jié)果婚禮上柴灯,老公的妹妹穿的比我還像新娘。我一直安慰自己费尽,他們只是感情好赠群,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著旱幼,像睡著了一般查描。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上柏卤,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天冬三,我揣著相機(jī)與錄音,去河邊找鬼缘缚。 笑死勾笆,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的桥滨。 我是一名探鬼主播窝爪,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼齐媒!你這毒婦竟也來(lái)了蒲每?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤喻括,失蹤者是張志新(化名)和其女友劉穎啃勉,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體双妨,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年叮阅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了刁品。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡浩姥,死狀恐怖挑随,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情勒叠,我是刑警寧澤兜挨,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布膏孟,位于F島的核電站,受9級(jí)特大地震影響拌汇,放射性物質(zhì)發(fā)生泄漏柒桑。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一噪舀、第九天 我趴在偏房一處隱蔽的房頂上張望魁淳。 院中可真熱鬧,春花似錦与倡、人聲如沸界逛。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)息拜。三九已至,卻和暖如春净响,著一層夾襖步出監(jiān)牢的瞬間少欺,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工别惦, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留狈茉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓掸掸,卻偏偏與公主長(zhǎng)得像氯庆,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子扰付,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 大家好羽莺,我是前端嵐楓实昨,一枚二線城市的程序媛,上篇主要跟分享了《VUE系列-Vue中組件的應(yīng)用(三)[https:/...
    前端嵐楓閱讀 990評(píng)論 0 0
  • Vue3快速上手 1.Vue3簡(jiǎn)介 2020年9月18日盐固,Vue.js發(fā)布3.0版本荒给,代號(hào):One Piece(海...
    冷r閱讀 2,940評(píng)論 1 38
  • Vue 3 的 Template 支持多個(gè)根標(biāo)簽,Vue 2 不支持 Vue 3 有 createApp()刁卜,而 ...
    硅谷干貨閱讀 700評(píng)論 0 4
  • 一志电、Vue3啟程 1. 初始Vue3 姓名:{{name}} 年齡:{{age}} 修改數(shù)據(jù) /...
    野鴿兒閱讀 537評(píng)論 0 0
  • Vue3快速上手 1.Vue3簡(jiǎn)介 2020年9月18日,Vue.js發(fā)布3.0版本蛔趴,代號(hào):One Piece(海...
    不再猶豫_c61b閱讀 460評(píng)論 0 0