Vue 3 大不同 | 全局 API “沒了”
Vue 的 2.x 版本有很多的全局 API 和 配置，它們會在全局范圍內改變 Vue 的行為。
比如常見的全局 API 有：Vue.component / Vue.mixin / Vue.extend / Vue.nextTick；
常見的全局配置有：Vue.config.silent / Vue.config.devtools / Vue.config.productionTip
比如（官方例子），如果你想創(chuàng)建一個全局的組件，你會用到 Vue.component:
Vue.component('trump-sucks',?{
??data:?()?=>?({?position:?'America?president',?}),
??template:?`Trump?is?the?worst?${position}
`;
});
或者聲明一個全局指令：
Vue.directive('focus',?{
??inserted:?el?=>?{
????console.log('聚焦！');
????el.focus();
??},
});
這樣確實比較方便，但是會造成一些問題。首先要明確的一點是，Vue 2.x 在設計上并沒有 app（應用）的概念。開發(fā)者在使用 Vue 2.x 時所謂的 app 不過是一個用 new Vue()創(chuàng)建的 Vue 實例罷了（呵，不過如此）。由同一個 Vue 構造函數(shù)創(chuàng)建的 Vue 實例都會共享來自構造函數(shù)的全局配置。這將會導致：
在測試過程中，由于全局配置的存在，測試用例很容易就會被“污染”。開發(fā)者需要小心翼翼地將全局配置找一個地方存下來，在每次測試結束后將其還原，比如 Vue.config.errorHandler；一些 API 比如 Vue.use 和 Vue.mixin 甚至沒有避免其影響的辦法。這使得在測試中一旦涉及了插件，整個過程都會變得非常棘手。事實上，為了解決這個問題，vue-test-utils 不得不引入一個特殊的 API：createLocalVue：
import?{?createLocalVue,?mount?}?from?'@vue/test-utils';
const?localVue?=?createLocalVue();
localVue.use(MyPlugin);
mount(Component,?{?localVue?});
還有一個避免不了的問題是，一旦頁面上有多個 Vue 實例時，它們的全局配置就很自然地共享了，但在很多時候開發(fā)者并不想要這樣的結果
Vue.mixin({
??mounted:?()?=>?{
????console.log('wubba?lubba?dub?dub');
??},
});
const?rick?=?new?Vue({?el:?'#rick'?});
const?morty?=?new?Vue({?el:?'#morty'?});
因此，為了規(guī)避這些問題，Vue 3 引入了應用實例的概念。
全局 API: createApp
調用 createApp 會返回一個 應用實例，沒錯，應用實例這個概念是 Vue 3 中新引入的。
import?{?createApp?}?from?'vue';
const?app?=?createApp();
應用實例會暴露一個當前全局 API 的子集。在這個重構工作中，Vue 團隊秉承的經(jīng)驗法則是：任何會在全局范圍內影響 Vue 行為的 API 都會被遷移至應用實例中去。
| 2.x 的全局 API | 3.x 的應用實例?API |
Vue.config | app.config |
Vue.config.productionTip | 移除 |
Vue.config.ignoredElements | app.config.isCustomElement |
Vue.component | app.component |
Vue.directive | app.directive |
Vue.mixin | app.mixin |
Vue.use | app.use |
掛載一個應用實例
在使用 createApp(VueInstance) 得到一個應用實例后，這個應用實例就可以用來把整個 Vue 跟實例掛載到頁面上了：
import?{?createApp?}?from?'vue';
import?MyApp?from?'./MyApp.vue';
const?app?=?createApp(MyApp);
app.mount('#app');
在完成了這些改造之后，開篇我們提到的那些例子將會重寫成這樣：
app.component('trump-sucks',?{
??data:?()?=>?({?position:?'America?president',?}),
??template:?`Trump?is?the?worst?${position}
`;
});
app.directive('focus',?{
??inserted:?el?=>?{
????console.log('聚焦！');
????el.focus();
??},
});
//?至此，所有在 app 所包含的組件樹內創(chuàng)建的 Vue 實例才會共享 trump-sucks 這個組件和 focus 這個指令，而 Vue 構造函數(shù)并沒有被污染。
多個應用實例的配置共享
上文提到的“不是所有開發(fā)者都想要的全局配置共享”，在 Vue 3 中可以通過工廠函數(shù)的方式實現(xiàn)：
import?{?createApp?}?from?'vue';
import?CaiXuKun?from?'./CXK.vue';
import?WuYiFan?from?'./WYF.vue';
const?createIdolApp?=?(IdolInstance)?=>?{
?const?idolApp?=?createApp(IdolInstance);
??idolApp.directive('sing-and-dance',?{
???inserted:?()?=>?{
??????console.log('I?am?cool!');
????},
??});
}
createIdolApp(CaiXuKun).mount('#caixukun');
createIdolApp(WuYiFan).mount('#wuyifan');
這樣就能實現(xiàn)多個應用實例的配置共享了：蔡徐坤和吳亦凡都有了一個叫做“唱跳”的 Vue 自定義指令。
- END -
推薦閱讀
我的公眾號能帶來什么價值？(文末有送書規(guī)則，一定要看)
每個前端工程師都應該了解的圖片知識(長文建議收藏)
為什么現(xiàn)在面試總是面試造火箭？