（一）版本常用差異對比

前言：尤大大發(fā)布Vue3.x已經(jīng)快1個月時間雇庙，經(jīng)過自己不斷的摸索谓形，嘗試，調(diào)試疆前，現(xiàn)將己之拙見與君共勉寒跳，歡迎留言糾正。

本篇主要從不同角度對兩個版本的差異性進行對比竹椒，比較童太。

一、全局API

1胸完、新增全局API：createApp()
// Vue2.x中我們采用的是new Vue(...),Vue3.x中我們將使用如下方式來創(chuàng)建我們的應用實例
import { createApp } from 'vue';
const app = createApp({});
2书释、應用配置（Vue2.x > Vue3.x）
  • Vue.config?????????>?app.config
  • Vue.config.production????>?刪除
  • Vue.config.ignoredElements?>?app.config.isCustomElement
  • Vue.component????????>?app.component
  • Vue.directive??????????>?app.directive
  • Vue.mixin?????????>?app.mixin
  • Vue.use????????????>?app.use
3、應用程序掛載
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
4赊窥、新增全局注入/提日骼洹：provide/inject
// root component
app.provide('title', 'Hello Vue3.x!');

// children component
export default {
    ...
    const data = inject('title');
    ...
}
5、全局方法

例如：nextTick

// Vue2.x
import Vue from 'vue';
Vue.nextTick(() => { // ... do something }));
// 或者
export default {
    ...
    this.$nextTick(() => { // ... do something}]);
    ...
};

// Vue3.x
import { nextTick } from 'vue';
export default {
    ...
    nextTick(() => { // ... do something}]);
    ...
};

二誓琼、自定義指令：directive

Vue3.x中對自定義指令的創(chuàng)建提供了更加細致的API（類似于組件的聲明周期）

1检激、bind?????????>??deforeMount（掛載前）
2、inserted????????>??mounted（掛載后）
3腹侣、??????????>??beforeUpdate（新增叔收，更新前）
4、update???????>??刪除
5傲隶、componentUpdated??>??updated（更新后）
6饺律、??????????>??beforeUnmount（新增，卸載前）
7跺株、unbind???????>??unmounted（卸載后）

三复濒、自定義元素

元素/組件
// 例有如下自定義元素（非組件），若不將其定義為元素白名單乒省，則在編譯過程中就會出錯巧颈。
<user-check></user-check>

// Vue2.x
Vue.config.ignoredElements = ['user-check'];

// Vue3.x
// 方式一  webpack中的vue-loader中配置選項
rules: [
    {
        text: /\.vue$/,
        use: 'vue-loader',
        options: {
            compilerOptions: {
                isCustomElement: tag => tag === 'user-check'
            }
        }
    }
]
// 方式二  實例化vue中的自定義配置元素白名單
import { createApp } from 'vue';
const app = createApp({}).config.isCustomElement = tag => tag === 'user-check';

四、Events API（全局事件總成）

Vue2.x中借助一個新的Vue實例來實現(xiàn)全局的事件發(fā)布袖扛、訂閱和注銷
// events.js
const eventHub = new Vue();
export default eventHub ;

// childrenComponent.vue
import eventHub from './events.js';
export default {
    mounted(){
        eventHub.$on('change-event', () => {...})
    },
    beforedestroy() {
        eventHub.$off('change-event');
    }
};

//parentComponent.vue
import eventHub from './events.js';
export default {
    methods: {
        changeHandler() {
            eventHub.$emit('change-event', ...);
        }
    }
};
但是在Vue3.x中砸泛，已刪除：on，off蛆封，$once唇礁。
Vue3.x中全局事件總成將使用mitt來實現(xiàn)跨組件通訊。

五惨篱、過濾器：Filters

Vue3.x中已將Filters刪除盏筐，建議使用處理函數(shù)或者計算屬性來處理數(shù)據(jù)

六、多根節(jié)點組件

// Vue2.x
<template>
    <div>....</div>
</template>

// Vue3.x中可以使用多個跟節(jié)點
<template>
    <div>....</div>
    <div>....</div>
    ...
</template>

七砸讳、按鍵修飾符

// Vue2.x
<input v-on:keyup.13="submit" />
<input v-on:keyup.enter="submit" />
Vue.config.keyCodes = { f1:112 };

// Vue3.x 別名支持任意鍵
<input v-on:keyup.delete="cancel" />

八琢融、渲染功能

// Vue2.x
export default {
  render(h) {
    return h('div')
  }
}

// Vue3.x
import { h } from 'vue'

export default {
  render() {
    return h('div', {class: 'red'}, 'Hello, Vue3.x!');
  }
}

九楷拳、v-model

// Vue2.x  v-model實現(xiàn)原理
<user-check v-model="msg"></user-check>
<user-check :value="msg" @input="tag=$event"></user-check>

// Vue3.x  修改了v-model的實現(xiàn)方法，可以同時綁定多個

// 單個v-model綁定
<user-check v-model="msg"></user-check>
<user-check :modelValue="msg" @update:modelValue="tag=$event"></user-check>
// 子組件中使用props: {modelValue: String}接收值

// 多個v-model綁定
<user-check v-model:name="name" v-model:age="age"></user-check>
<user-check :name="name" @update:name="tag=$event" :age="age" @update:age="tag=$event"></user-check>
// 子組件中使用props: {name: String, age: Number}接收值

十吏奸、v-is

// vue的動態(tài)組件中使用is
<component is="foo"></component>
// Vue2.x --->  is的值指的是要渲染的組件的名稱欢揖；渲染foo組件
// Vue3.x --->  is的值指的是要渲染的組件的名稱；渲染foo組件

// 一般組件中使用is
<user-edit is="foo"></tr>
// Vue2.x --->  is的值指的是要渲染的組件的名稱奋蔚；渲染foo組件
// Vue3.x --->  is的值為any她混；渲染user-edit組件；is將作為組件的prop進行值的傳遞

// 一般元素上使用is
<tr is="val">...</tr>
// vue2.x --->  is的值會被編譯為boolean泊碑；且元素會被動態(tài)加載或銷毀（會觸發(fā)transition效果）
// vue3.x --->  is的值為any坤按；值的變化不會造成元素任何變化(丟失了vue2中元素上使用的is的功能，因此vue3中引入了新的指令v-is)

// Vue3.x的新指令：v-is
// 一般元素上使用v-is
<tr v-is="val"></tr>  // 與vue2.x中一般元素上使用is的效果一致

十一馒过、v-for中使用ref

// vue2.x
<p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p>

console.log(this.$refs.nodes) // 返回所有循環(huán)的p元素節(jié)點

// vue3.x
// 如果還是按照Vue2.x的方式
<p v-for="item in renderData" :key="item.name" ref="nodes"></p>

console.log(this.$refs.nodes) // 此時只能得到循環(huán)后最后一個P元素節(jié)點

// Vue3.x中臭脓，使用函數(shù)處理v-for中的ref，且用變量單獨存儲腹忽。
<p v-for="item in renderData" :key="item.name" ref="handleNodes"></p>

setup() {
    const data = reactive({
        nodes: []
    });
    const handleNodes = nodeItem => {
        data.nodes.push(nodeItem);
    }
    return {
        ...toRefs(data)
    }
}

十二来累、mixins的合并行為更改

// mixin
export default {
    data() {
        return { name: 'zhang_san', age: 20 };
    }
};

// Vue2.x
export default {
    data() {
        return { age: 30 };
    },
    mounted() {
        console.log(this.$data); // {name: 'zhang_san', age: 30}
        console.log(this.name); // 'zhang_san'
        console.log(this.age); // 30
    }
};

// Vue3.x
export default {
    data() {
        return { age: 30 };
    },
    mounted() {
        console.log(this.$data); // { age: 30 }
        console.log(this.name); // 'zhang_san'
        console.log(this.age); // 30
    }
};
// 得出結(jié)論：1、與Vue2.x一樣會覆蓋掉mixins中相同的響應屬性窘奏；2嘹锁、Vue3.x中當前實例的$data是不會包含mixins中定義定響應屬性。

十三着裹、template公共組件使用key

Vue2.x中的template標簽在v-for使用key屬性時會報語法錯誤

template(v-for="(layerItem,index) in layerList" :key="index")

Vue3.x中則推薦使用key屬性以提高模板渲染效率领猾；

十四、過度動畫類命名

// Vue2.x
.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-leave,
.v-enter-to {
  opacity: 1;
}

// Vue3.x骇扇，更加容易理解
.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

十五摔竿、v-if和v-for優(yōu)先級

當v-if和v-for同時作用于一個元素上時:
Vue2.x中v-for的優(yōu)先級會高于v-if；
Vue3.x中v-if的優(yōu)先級會高于v-for少孝；
使用禁忌：Vue3.x中不能將v-for和v-if放在同一個元素上继低。只能使用v-for嵌套v-if使用
使用建議：官方建議使用計算屬性來處理，即提高性能韭山，又能兼容Vue3.x郁季。

十六、新增v-slot指令

在vue3中钱磅，新增了v-slot指令來區(qū)別于之前的slot
插槽的定義方式與之前vue2中的定義方式基本一致。
插槽的使用推薦使用：

// 默認插槽（匿名插槽）的使用
template(#)  // 等價于 template(v-slot)
  div...
// 具名插槽的使用
template(#)  // 等價于 template(v-slot:name)
  div...

使用默認插槽（匿名插槽）時似枕，可以和之前使用匿名插槽的方式一致盖淡，也能使用vue3中推薦的template方式。
具名插槽的使用是能是使用template方式去插入到指定的位置凿歼。

十七褪迟、$attrs 和 $listenner 的融合

我們知道冗恨，在vue2中我們使用v-bind="$attrs"，v-on="$listenner"來將數(shù)據(jù)和事件做一個承上啟下的作用味赃，但是在vue3中掀抹，首先是刪除了v-on指令，其次是發(fā)現(xiàn)這兩個組件的屬性過于累贅心俗，所以在當前版本中將 $attrs 和 $listenner 他們的功能進行了融合傲武，$listenner 現(xiàn)在已作為 $attrs 的其中一部分進行傳遞，所以只需要在組建上指定 v-bind="$attrs" 城榛，那么將同時擁有傳值和傳遞事件的功能揪利。

下一章：（二）Vue3.x應用程序API

ps：當你的實力和才華還不夠?qū)崿F(xiàn)你的野心，那么靜下心來狠持，埋頭苦干疟位！致敬自己，不負韶華喘垂。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末甜刻，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子正勒，更是在濱河造成了極大的恐慌罢吃，老刑警劉巖，帶你破解...
    沈念sama閱讀 211,290評論 6贊 491
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件昭齐，死亡現(xiàn)場離奇詭異尿招，居然都是意外死亡，警方通過查閱死者的電腦和手機阱驾，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門就谜，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人里覆，你說我怎么就攤上這事丧荐。” “怎么了喧枷？”我有些...
    開封第一講書人閱讀 156,872評論 0贊 347
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵虹统，是天一觀的道長。 經(jīng)常有香客問我隧甚，道長车荔，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,415評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任戚扳，我火速辦了婚禮忧便，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘帽借。我一直安慰自己珠增，他們只是感情好超歌，可當我...
    茶點故事閱讀 65,453評論 6贊 385
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蒂教，像睡著了一般巍举。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上凝垛，一...
    開封第一講書人閱讀 49,784評論 1贊 290
  • 城市分裂傳說
    那天懊悯，我揣著相機與錄音，去河邊找鬼苔严。 笑死定枷，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的届氢。 我是一名探鬼主播欠窒，決...
    沈念sama閱讀 38,927評論 3贊 406
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼退子！你這毒婦竟也來了岖妄？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 37,691評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤寂祥，失蹤者是張志新（化名）和其女友劉穎荐虐，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體丸凭，經(jīng)...
    沈念sama閱讀 44,137評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡福扬，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2贊 326
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了惜犀。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片铛碑。...
    茶點故事閱讀 38,622評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖虽界，靈堂內(nèi)的尸體忽然破棺而出汽烦，到底是詐尸還是另有隱情，我是刑警寧澤莉御，帶...
    沈念sama閱讀 34,289評論 4贊 329
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布撇吞，位于F島的核電站，受9級特大地震影響礁叔，放射性物質(zhì)發(fā)生泄漏牍颈。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一晴圾、第九天 我趴在偏房一處隱蔽的房頂上張望颂砸。 院中可真熱鬧，春花似錦死姚、人聲如沸人乓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0贊 21
  • 一樁弒父案都毒，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽色罚。三九已至，卻和暖如春账劲，著一層夾襖步出監(jiān)牢的瞬間戳护，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1贊 265
  • 情欲美人皮
    我被黑心中介騙來泰國打工瀑焦， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留腌且，地道東北人。 一個月前我還...
    沈念sama閱讀 46,316評論 2贊 360
  • 代替公主和親
    正文 我出身青樓榛瓮，卻偏偏與公主長得像铺董，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子禀晓，可洞房花燭夜當晚...
    茶點故事閱讀 43,490評論 2贊 348