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