大廠技術(shù)??堅(jiān)持周更??精選好文

一、Vue3

Vue3中文文檔^[1]

• Vue3是什么，與Vue2區(qū)別（What）

1. Performance：性能更強(qiáng)。
2. Tree shaking support：可以將無用模塊“剪輯”，僅打包需要的。
3. Composition API：組合式API
4. Fragment, Teleport, Suspense：“碎片”，Teleport即Protal傳送門，“懸念”
5. Better TypeScript support：更優(yōu)秀的Ts支持
6. Custom Renderer API：暴露了自定義渲染API

• 為什么要大版本迭代 （Why）

1. 主流瀏覽器對(duì)新的JavaScript語(yǔ)言特性的普遍支持。
2. 當(dāng)前Vue代碼庫(kù)隨著時(shí)間的推移而暴露出來的設(shè)計(jì)和體系架構(gòu)問題。

• 他是如何提升的（How）

1. 響應(yīng)式系統(tǒng)提升： 使用Proxy提升了響應(yīng)式的性能和功能
2. 編譯優(yōu)化： 標(biāo)記和提升所有的靜態(tài)節(jié)點(diǎn)，diff時(shí)只需要對(duì)比動(dòng)態(tài)節(jié)點(diǎn)內(nèi)容
3. 事件緩存： 提供了事件緩存對(duì)象cacheHandlers，無需重新創(chuàng)建函數(shù)直接調(diào)用緩存的事件回調(diào)
4. 打包和體積優(yōu)化： 按需引入，Tree shaking支持（ES Module）

二、編碼

全局API

1. 【新增】createApp： 入口文件（main.ts）掛載方式

import?{?createApp?}?from?"vue";

import?App?from?"./App.vue";



//?Vue2

new?Vue({

???render:?(h)?=>?h(App)

}).$mount("#app");



//?Vue3

createApp(App)

??.use(**)

??.mount("#app");

2. 【修改】

config.ignoredElements替換為config.isCustomElement

引入此配置選項(xiàng)的目的是支持原生自定義元素，因此重命名可以更好地傳達(dá)它的功能，新選項(xiàng)還需要一個(gè)比舊的 string/RegExp 方法提供更多靈活性的函數(shù)：

//?Vue2

Vue.config.ignoredElements?=?[

??//?用一個(gè)?`RegExp`?忽略所有“ion-”開頭的元素

??//?僅在?2.5+?支持

??/^ion-/

]



//?Vue3

const?app?=?Vue.createApp({})

app.config.isCustomElement?=?tag?=>?tag.startsWith('ion-')

Vue.prototype 替換為 config.globalProperties

在Vue 2中，Vue.prototype通常用于添加可在所有組件中訪問的屬性。

Vue 3中的等效項(xiàng)是config.globalProperties。在實(shí)例化應(yīng)用程序內(nèi)的組件時(shí)，將復(fù)制這些屬性

//?Vue2

Vue.prototype.$http?=?()?=>?{}



//?Vue3

const?app?=?Vue.createApp({})

app.config.globalProperties.$http?=?()?=>?{}

生命周期

新特性

1. Options API => Composition API

2. setup()

import?{toRefs}?from?'vue'

export?default?{

????name:?'demo',

????props:{

??????name:?String,

????},

????// setup()作為在組件內(nèi)使用Composition API的入口點(diǎn)。

????//?執(zhí)行時(shí)機(jī)是在beforeCreate和created之間,不能使用this獲取組件的其他變量，

????//?而且不能是異步。setup返回的對(duì)象和方法，都可以在模版中使用。

????setup(props,?context){

??????//?這里需要使用toRefs來進(jìn)行解構(gòu)

??????//?這里的props與vue2基本一致,當(dāng)然這里的name也可以直接在template中使用

??????const?{?name?}=toRefs(props);

??????console.log(name.value);

??????

??????//?context是一個(gè)上下文對(duì)象

??????//【從原來?2.x?中?this?選擇性地暴露了一些?property（attrs/emit/slots）】

??????//?屬性，同vue2的?$attrs

??????console.log(context.attrs);

??????//?插槽

??????console.log(context.slots);

??????//?事件，同vue2的?$emit

??????console.log(context.emit);

??????//?生命周期鉤子

??????onMounted(()?=>?{})

??}

}

注意點(diǎn)：

• 注意 props 對(duì)象是響應(yīng)式的，watchEffect 或 watch 會(huì)觀察和響應(yīng) props 的更新，不要解構(gòu) props 對(duì)象，那樣會(huì)使其失去響應(yīng)性
• attrs 和 slots 都是內(nèi)部組件實(shí)例上對(duì)應(yīng)項(xiàng)的代理，可以確保在更新后仍然是最新值。所以可以解構(gòu)，無需擔(dān)心后面訪問到過期的值
• this在 setup()中不可用。由于 setup() 在解析 2.x 選項(xiàng)前被調(diào)用，setup() 中的 this 將與 2.x 選項(xiàng)中的 this 完全不同。同時(shí)在 setup() 和 2.x 選項(xiàng)中使用 this 時(shí)將造成混亂

3. 響應(yīng)式reactive，ref

import?{?ref,?reactive,?toRefs?}?from?'vue';



setup()?{

????//?ref

????//?ref?對(duì)我們的值創(chuàng)建了一個(gè)響應(yīng)式引用

????const?counter?=?ref(0);?

????

????//?reactive

????//?接收一個(gè)普通對(duì)象然后返回該普通對(duì)象的響應(yīng)式代理

????const?obj?=?{a:1};

????const?objReactive?=?reactive(obj);



????const?add?=?()?=>?{

??????counter.value++;

??????objReactive.a++;

????}

????

????return?{

??????counter,??//?return返回會(huì)自動(dòng)解套【在模板中不需要.value】

??????objReactive,

??????add,

????};?//?這里返回的任何內(nèi)容都可以用于組件的其余部分

}

問題 & 注意點(diǎn)： 因?yàn)閞eactive是組合函數(shù)【對(duì)象】，所以必須始終保持對(duì)這個(gè)所返回對(duì)象的引用以保持響應(yīng)性，不能解構(gòu)該對(duì)象或者展開

例如：

const { a } = objReactive或者return { ...objReactive }

解決方法：

toRefs API

用來提供解決此約束的辦法——它將響應(yīng)式對(duì)象的每個(gè) property 都轉(zhuǎn)成了相應(yīng)的 ref【把對(duì)象轉(zhuǎn)成了ref】。

import?{?reactive,?toRefs?}?from?'vue';



setup()?{

????//?reactive

????//?接收一個(gè)普通對(duì)象然后返回該普通對(duì)象的響應(yīng)式代理

????const?obj?=?{a:1};

????const?objReactive?=?reactive(obj);

????

????//?toRefs

????//?將響應(yīng)式對(duì)象轉(zhuǎn)換為普通對(duì)象，其中結(jié)果對(duì)象的每個(gè)?property?都是指向原始對(duì)象相應(yīng)?property?的ref

????const?objRef?=?toRefs(objReactive);

????

????const?{?a?}?=?objRef;

????const?addObj?=?()?=>?{

??????a.value++;

??????console.log(a.value,?objRef,?objReactive,?obj);

????}



????return?{

??????...objRef,

??????addObj

????};?

}

• Hooks方式

1. counter.js

import?{?ref?}?from?'vue';



export?function?useCounter()?{

????const?count?=?ref(0);

????const?decrement?=?()?=>?{

????????count.value--;

????}

????const?increment?=?()?=>?{

????????count.value++;

????}

????return?{

????????count,

????????decrement,

????????increment

????}

}

2. 父組件