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