【51CTO.com原創稿件】

前言

本文主要介紹日常項目開發過程中的一些技巧，幫助大家規避錯誤的同時還能提高應用的性能。以下是我總結的一些平時工作中的經驗。

在v-if/v-if-else/v-else中使用key

如果一組v-if 與v-else的元素類型相同，最好使用屬性key。這是因為Vue2.0引入虛擬DOM,為了避免不必要的DOM操作，虛擬DOM在虛擬節點映射到視圖過程中，將虛擬節點與上一次渲染視圖所使用的舊虛擬節點做對比，找出真正需要更新的節點來進行DOM操作。但有時如果兩個本不相同的節點被識別為相同，便會出現意料之外的問題。我們看下面的一個例子：

// 這種寫法會出bug 
<div v-if="flag"> 
  <label>浪里行舟</label> 
  <input type="text" /> 
</div> 
<div v-else> 
  <label>前端工匠</label> 
  <input type="text" /> 
</div> 
<button @click="flag = !flag">切換</button>  

如果添加了屬性key,那么在對比虛擬DOM時，則會認為它們是兩個不同的節點，于是會將舊元素移除并在相同位置添加新元素，從而避免漏洞的出現。

// 最佳寫法 
<div v-if="flag"> 
  <label>浪里行舟</label> 
  <input key="1" type="text" /> 
</div> 
<div v-else> 
  <label>前端工匠</label> 
  <input key="2" type="text" /> 
</div> 
<button @click="flag = !flag">切換</button> 

v-for循環中不要使用index作為key

我們會給列表渲染設置屬性key,這個key屬性主要用在虛擬DOM算法上，在對比新舊虛擬節點時辨識虛擬節點。但如果key用得不合理，就會出現bug,比如我們使用index作為key(見下面例子)，核心代碼如下：

<div class="border"> 
  <Children v-for="(key, index) in list" :key="index">//使用index作為key 
    <button @click="() => handleDelete(key)">刪除</button> 
  </Children> 
  <button @click="handleAdd">添加</button> 
</div> 
...... 
  handleAdd() { 
    this.list.push(key++); 
  }, 
  handleDelete(key) { 
    const index = this.list.findIndex(k => k === key); 
    this.list.splice(index, 1); 
  } 

上例中，我們想刪除第二個輸入框，卻誤刪了第三個輸入框，這因為當使用splice()方法刪除數組的某個元素時數組的index會被重新索引，造成數組的最后一個index丟失，從而會使虛擬DOM的最后一個結點（key）丟失，造成無論刪除哪個結點都會誤刪除最后一個結點的bug。但如果我們使用傳入的key作為key,就可以避免這種問題出現。

<div class="border"> 
  <Children v-for="key in list" :key="key"> 
    <button @click="() => handleDelete(key)">刪除</button> 
  </Children> 
  <button @click="handleAdd">添加</button> 
</div> 

簡單暴力的router key

我們在項目開發時，可能會遇到這樣問題:當頁面切換到同一個路由但不同參數地址時，比如/detail/1，跳轉到/detail/2，頁面跳轉后數據竟然沒更新？路由配置如下：

{ 
    path: "/detail/:id", 
    name:"detail", 
    component: Detail 
} 

這是因為vue-router會識別出兩個路由使用的是同一個組件從而進行復用，并不會重新創建組件，而且組件的生命周期鉤子自然也不會被觸發，導致跳轉后數據沒有更新。那我們如何解決這個問題呢？ 我們可以為router-view組件添加屬性key,例子如下： 

<router-view :key="$route.fullpath"></router-view> 

這種辦法主要是利用虛擬DOM在渲染時候通過key來對比兩個節點是否相同，如果key不相同，就會判定router-view組件是一個新節點，從而先銷毀組件，然后再重新創建新組件，這樣組件內的生命周期會重新觸發。

路由懶加載

當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。 配合webpack支持的路由懶加載方法有：

• 這種方法比較通用，而且支持性好

resolve => require([./Foo], resolve) 

• 這種寫法是官方文檔推薦的，如下：

const Foo = () => import('./Foo') 

接下來我們以官方文檔的寫法為例，對比這兩種寫法：

// 非懶加載寫法 
import Vue from 'vue' 
import Router from 'vue-router' 
import Home from 'pages/home' 
... 
​ 
Vue.use(Router) 
​ 
export default new Router({ 
routes: [ 
  { 
      path: '/', 
      name: 'home', 
      component: Home 
  } 
  ... 
] 
}) 

推薦以下寫法，路由懶加載可以幫我們在進入首屏時不用加載過多的資源，從而減少首屏加載速度。

// 路由懶加載寫法 
import Vue from 'vue' 
import Router from 'vue-router' 
​ 
// 其它都不用變，就是這么簡單 
const Home = () => import('./home') 
... 
​ 
Vue.use(Router) 
​ 
export default new Router({ 
routes: [ 
  { 
      path: '/', 
      name: 'home', 
      component: Home 
  } 
  ... 
] 
}) 

不要在使用v-for的同一元素上使用v-if

Vue官方文檔強烈建議永遠不要把 v-if 和 v-for 同時用在同一個元素上。一般我們在兩種常見的情況下會傾向于這樣做：

• 1)為了過濾一個列表中的項目 (比如 v-for="user in users" v-if="user.isActive")。在這種情形下，請將 users 替換為一個計算屬性 (比如 activeUsers)，讓其返回過濾后的列表(見下面例子)。

// 第一種情形 反例 
<ul> 
<li 
  v-for="user in users" 
  v-if="user.isActive" 
  :key="user.id" 
> 
  {{ user.name }} 
</li> 
</ul> 

當 Vue 處理指令時，v-for 比 v-if 具有更高的優先級，所以哪怕我們只渲染出一小部分用戶的元素，也得在每次重渲染的時候遍歷整個列表，不論活躍用戶是否發生了變化。我們可通過將其更換為在如下的一個計算屬性上遍歷：

// 好例子 
computed: { 
activeUsers: function () { 
  return this.users.filter(function (user) { 
    return user.isActive 
  }) 
} 
} 

<ul> 
<li 
  v-for="user in activeUsers" 
  :key="user.id" 
> 
  {{ user.name }} 
</li> 
</ul> 

• 2)為了避免渲染本應該被隱藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將 v-if 移動至容器元素上 (比如 ul, ol)(見下面例子)。

// 第二種情形 反例 
<ul> 
<li 
  v-for="user in users" 
  v-if="shouldShowUsers" 
  :key="user.id" 
> 
  {{ user.name }} 
</li> 
</ul> 

更新為：

// 好例子 
<ul v-if="shouldShowUsers"> 
<li 
  v-for="user in users" 
  :key="user.id" 
> 
  {{ user.name }} 
</li> 
</ul> 

過濾器讓數據處理更便利

Vue.js 允許你自定義過濾器，它的用法其實是很簡單，但是可能有些朋友沒有用過，接下來我們介紹下：

1.理解過濾器

• 功能：對要顯示的數據進行特定格式化后再顯示。

• 注意：過濾器并沒有改變原本的數據，需要對展現的數據進行包裝。

• 使用場景：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。

2.定義過濾器

可以在一個組件的選項中定義本地的過濾器：

filters: { 
capitalize: function (value) { 
  if (!value) return '' 
  value = value.toString() 
  return value.charAt(0).toUpperCase() + value.slice(1) 
} 
} 

也可以在創建 Vue 實例之前全局定義過濾器：

Vue.filter('capitalize', function (value) { 
if (!value) return '' 
value = value.toString() 
return value.charAt(0).toUpperCase() + value.slice(1) 
}) 

3.使用過濾器

使用方法也簡單，即在雙花括號中使用管道符(pipeline) |隔開：

<!-- 在雙花括號中 --> 
<div>{{ myData| filterName}}</div> 
<div>{{ myData| filterName(arg)}}</div> 
<!-- 在 v-bind 中 --> 
<div v-bind:id="rawId | formatId"></div> 

接下來我們看個如何使用過濾器格式化日期的例子：

<div> 
  <h2>顯示格式化的日期時間</h2> 
  <p>{{ date }}</p> 
  <p>{{ date | filterDate }}</p> 
  <p>年月日: {{ date | filterDate("YYYY-MM-DD") }}</p> 
</div> 
...... 
filters: { 
  filterDate(value, format = "YYYY-MM-DD HH:mm:ss") { 
    console.log(this)//undefined 過濾器沒有this指向的 
    return moment(value).format(format); 
  } 
}, 
data() { 
  return { 
    date: new Date() 
  }; 
} 

 

能用computed的盡量用computed代替 watch

很多時候頁面會出現 watch 的濫用而導致一系列問題的產生，而通常更好的辦法是使用 computed 屬性，先從一張圖區別它們有什么區別?

從上面流程圖中，我們可以看出它們之間的區別：

• watch：監測的是屬性值， 只要屬性值發生變化，其都會觸發執行回調函數來執行一系列操作。

• computed：監測的是依賴值，依賴值不變的情況下其會直接讀取緩存進行復用，變化的情況下才會重新計算。

除此之外，有點很重要的區別是：計算屬性不能執行異步任務，計算屬性必須同步執行。也就是說計算屬性不能向服務器請求或者執行異步任務。如果遇到異步任務，就交給偵聽屬性。watch也可以檢測computed屬性。總而言之，兩者的區別歸納為以下兩句話：

• computed能做的，watch都能做，反之則不行

• 能用computed的盡量用computed

為啥提倡使用 computed 代替 watch，這是因為有時候可以實現同樣的效果，而 computed 會更勝一籌，比如在處理多數據聯動的情況下，使用 computed 會更加合理一點。

<template> 
  <div> 
      <input type="text" v-model="firstName"> 
      <input type="text" v-model="lastName"> 
      <span>{{ fullName }}</span> 
      <span>{{ fullName2 }}</span> 
  </div> 
</template> 
​ 
<script> 
export default { 
  data() { 
      reurn { 
          firstName: '', 
          lastName: '', 
          fullName2: '' 
      } 
  }, 
    
  // 使用 computed 
  computed: { 
      fullName() { 
          return this.firstName + ' ' + this.lastName 
      } 
  }, 
    
  // 使用 watch 
  watch: { 
      firstName: function(newVal, oldVal) { 
          this.fullName2 = newVal + ' ' + this.lastName; 
      }, 
      lastName: function(newVal, oldVal) { 
          this.fullName2 = this.firstName + ' ' + newVal; 
      }, 
  } 
} 
</script> 

化繁為簡的Watchers

如果我們需要在組件初始化以及偵聽屬性變化時調用同一個方法，通常的做法像下面這樣：

watch: { 
myProperty() { 
  this.doSomething(); 
} 
}, 
created() { 
this.doSomething(); 
}, 
methods: { 
doSomething() { 
    console.log('doing something...'); 
} 
} 

盡管上面這段代碼看起來沒什么問題，但created鉤子里面執行的方法是多余的。我們可以把所需要執行的方法放到watch里面，避免在created鉤子里寫重復代碼，那將會在組件實例化的時候觸發多一次。 那如何優化呢？代碼如下：

watch: { 
myProperty: { 
  immediate: true,//表示創建組件時立馬執行一次 
  handler() { 
    console.log('doing something...'); // 只用一次的方法沒必要在methods里面聲明了 
  } 
} 
} 

參考文章與書籍

• 珠峰架構課(強烈推薦)

• Vue官方文檔

• Vue.js最佳實踐（五招讓你成為Vue.js大師)

• 深入淺出vue.js

• 【譯】VueJS 最佳實踐

• Vue 項目構建與開發入門

• 你或許不知道Vue的這些小技巧

• Vue 項目里戳中你痛點的問題及解決辦法  

作者介紹

浪里行舟，慕課網認證作者，前端愛好者，立志往全棧工程師發展，從事前端一年多，目前技術棧有vue全家桶、ES6以及less等，樂于分享，最近一年寫了五六十篇原創技術文章，得到諸多好評！

【51CTO原創稿件，合作站點轉載請注明原文作者和出處為51CTO.com】