七種需要避免的Vue.js常見錯誤
譯文
【51CTO.com快譯】不知您是否熟悉、或正在使用著Vue.js?？偟恼f來，Vue是用來設(shè)計用戶界面的漸進式框架。與其他框架不同，它在設(shè)計之初就充分考慮到了增量適應(yīng)性(incremental adaptability)。Vue的核心庫都主要集中并關(guān)注視圖層。它不僅容易上手，還便于與第三方的庫、以及既有項目相集成。同時，Vue生態(tài)系統(tǒng)所支持的庫在與單文件組件(SFC)等工具結(jié)合使用時，Vue也能夠為復(fù)雜的單頁應(yīng)用提供相應(yīng)的驅(qū)動與功能。
Vue.js的優(yōu)缺點
優(yōu)點：
- 代碼具有一定的可讀性
- 提供豐富的文獻與支持資料
- 具有適應(yīng)性和反應(yīng)性
- 框架本身體積不大
- 具體較強的靈活性
缺點：
- 社區(qū)規(guī)模較小
雖然優(yōu)勢大于劣勢，但是由于大多數(shù)開發(fā)人員未能遵循Vue.js的優(yōu)秀實踐(請參見-- https://levelup.gitconnected.com/best-practices-for-vue-js-b46760fe0096)，因此他們不僅無法充分利用Vue.js的全部潛能，而且可能時常犯錯。
就個人而言，我已經(jīng)使用Vue.js一段時間了，除了收獲愉快的體驗與經(jīng)驗，也曾犯過一些錯誤。為了避免大家跌入同樣的“坑”中，我在此將其中常見的七大錯誤總結(jié)如下：
1.添加模板編譯器
在嘗試導(dǎo)入Vue.js時，我發(fā)現(xiàn)：即使自己遵循了官方指南的說明事項，組件的內(nèi)聯(lián)(inline)模板也會返回空白頁面。對此，當(dāng)我試著使用那些渲染函數(shù)(render function)、或作為單文件組件定義的模板時，此類問題就沒有再現(xiàn)了。由于Vue具有許多個不同的版本，因此我估計這是由版本差異所導(dǎo)致的。畢竟，NPM軟件包所導(dǎo)出的默認(rèn)構(gòu)建版本，通常是僅用于構(gòu)建運行時(runtime)，并不包括模板的編譯器。
如果您熟悉JSX for React，那么就不難理解模板編譯器了。它的作用是通過函數(shù)調(diào)用的方式，僅替換那些模板字符串，進而創(chuàng)建一個虛擬的DOM節(jié)點。該問題未在單文件組件中發(fā)生的主要原因是：單文件組件使用了vue-loader和vueify工具。這兩個工具都能夠通過使用渲染函數(shù)所定義的模板，來生成簡單的JavaScript組件。因此，要避免該問題，您需要在導(dǎo)入期間指定正確的構(gòu)建版本。當(dāng)然，您也可以通過在捆綁程序的配置中，為Vue創(chuàng)建別名(alias)，來解決此類問題。
2.維持屬性的反應(yīng)性
React用戶一定對反應(yīng)性的概念并不陌生。它是通過調(diào)用setState函數(shù)來工作的。此函數(shù)能夠更新各種屬性值。盡管反應(yīng)性也是Vue.js的一大優(yōu)點，但它在Vue中的工作方式與在React中有所不同。在Vue中，它代理的是各種組件的屬性。用于覆蓋和更新的Get和Set函數(shù)，在虛擬的DOM中被傳遞。
- var vm = new Vue({
- el: '#vm',
- template: `<div>{{ item.count }}<input type="button" value="Click" @click="updateCount"/></div>`,
- data: {
- item: {}
- },
- beforeMount () {
- this.$data.item.count = 0;
- },
- methods: {
- updateCount () {
- // JavaScript object is updated but
- // the component template is not rendered again
- this.$data.item.count++;
- }
- }
- });
在上述Java代碼示例中，您可以清楚地看到Vue實例具有一個名為item的屬性，其中包含著一個空對象。在組件被初始化后，Vue會創(chuàng)建一個代理，該代理具有與item屬性相連接的get和set函數(shù)。據(jù)此，該框架會跟蹤各個值的變化，并做出相應(yīng)的反應(yīng)。
3.導(dǎo)出單文件組件
為了簡化JavaScript文件的復(fù)雜性，Vue使用了簡單的處置方法--單文件組件，它能夠?qū)⑺蠬TML、CSS和JavaScript代碼收集到同一個文件中。不過，由于單文件組件的代碼通常駐留在Vue文件內(nèi)部的script標(biāo)記中，因此即使代碼是由JavaScript編寫的，您仍然需要導(dǎo)出對應(yīng)的組件。當(dāng)然，您可以使用如下三種方法來實現(xiàn)：
- 直接導(dǎo)出
- 命名導(dǎo)出
- 默認(rèn)導(dǎo)出
如果選擇命名的導(dǎo)出方式，那么我們將無法對各個組件進行重命名。而且更重要的是，命名導(dǎo)出與單文件組件并不兼容。因此，如果您是一名新手用戶，我建議您使用默認(rèn)的導(dǎo)出方法會更好。
4.避免合并單文件組件
由于單文件組件可以使開發(fā)人員在同一個文件中添加各種代碼、模板和樣式，因此它簡化了開發(fā)的整個過程。不過，為了避免產(chǎn)生混亂，我們應(yīng)按需分隔不同的單文件組件。新導(dǎo)入的單文件組件很可能會覆蓋過往的單文件組件，因此我們在合并它們的時候要倍加小心。此外，單文件組件最大的一個缺點是：我們不能將它們整體導(dǎo)入到多個Vue組件之中。
5. 父數(shù)據(jù)更新子組件
在Vue.js中，父組件會使用props或發(fā)送事件消息，將數(shù)據(jù)向下傳遞給子組件。而子組件也會做出響應(yīng)。這種關(guān)系往往被稱為props down和event up。如下代碼片段展示了父數(shù)據(jù)如何通過props傳遞給子元素：
- <div>
- <input v-model="parentMsg">
- <br>
- <child v-bind:my-message="parentMsg"></child>
- </div>
6.根據(jù)Vuex行為產(chǎn)生promise
由于在Vuex中，各項行為都是異步的，因此為了讓調(diào)用函數(shù)知道某個行為是否已完成，唯一的方法是返回一個promise(承諾)，留在后期予以解決。據(jù)此，Vue會產(chǎn)生一個HTTP調(diào)用，并且在promise之后逐個處理各種“解決”或“拒絕”。
7.結(jié)合使用Vue.js和jQuery
如果需要與其他的DOM操作工具集(例如jQuery)一起使用Vue框架，您需要注意它們之間的相互隔離。也就是說，您既可以使用jQuery來操作DOM widget，也可以使用Vue，但是請不要同時使用這兩者。通常，包裝器(wrapper)組件會充當(dāng)Vue、對應(yīng)的組件、以及其他內(nèi)部DOM元素之間的鏈接，以實現(xiàn)彼此的交互。而且這些組件將會用于通過jQuery來操控各個內(nèi)部DOM元素。
最后，希望您在使用Vue.js框架設(shè)計應(yīng)用程序，開發(fā)解決方案，或創(chuàng)建Web應(yīng)用時，能夠避免觸犯上述七種Vue.js的常見錯誤。
原文標(biāo)題：7 Common Vue.js Mistakes You Should Never Make，作者：Irfan Ahmed
【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】
