使用Vue.js注意事項

1. 前言

通過前面小節的學習，我們基本掌握了怎樣用 uni-app 框架來開發并上線一個項目應用。知道了幾乎所有的前端應用都可以用 uni-app 框架進行開發，并且只需要用一套代碼就可以將項目部署到多個平臺。

uni-app 我們之所以用的這么順手，有很大一部分功勞是因為，uni-app 框架用的是 Vue.js 語法和微信小程序的 api。但是這樣的組合也有一些限制。

由于各個平臺的特性，有些 vue 語法在個別平臺上面沒有辦法實現，下面我們會給大家詳細講講各個平臺使用 Vue.js 語法時需要注意哪些地方。

2. 生命周期

uni-app 框架除了支持 vue 組件生命周期之外，還新增了應用生命周期和頁面生命周期。

這些生命周期函數對應的語法，我們在前面小節都給大家詳細的介紹過了，其中比較難以區分的是「頁面生命周期函數」和「組件生命周期函數」。

在日常項目開發過程中，這兩者之間功能會有點重復，我們通常選擇其中一個使用就可以了。但是要注意的是，應用生命周期函數僅在 page 頁面有效，在單獨封裝的組件中無效。但是組件生命周期函數在 page 頁面和單獨封裝的組件中都有效。

來用代碼實例驗證一下，在組件里面添加下面的生命周期函數，我是在 components/login/login.vue 文件里面添加的。
實例：

beforeCreate(){
	console.log('組件生命周期函數 beforeCreate：實例初始化');
},
onLoad() {
	console.log('頁面生命周期函數 onLoad：頁面初始化')
},
created(){
	console.log('組件生命周期函數 created：實例創建完成');
}

添加完成后，我們點擊工具欄–運行–運行到內置瀏覽器，控制臺中會打印下面的信息。

組件生命周期函數 beforeCreate：實例初始化
組件生命周期函數 created：實例創建完成

可以看到沒有打印頁面生命周期函數 onLoad?？梢则炞C頁面生命周期函數在單獨封裝的組件中無效。

這一點我們在開發過程中一定要注意，如果頁面生命周期函數沒有執行，先要檢查一下是不是在單獨封裝的組件中運行的。

2.data 屬性

data 屬性里面定義的是頁面的變量，在data里面定義的變量，我們應該怎樣展示在頁面上面呢？

是在 template 標簽中，通過 {{ mark }} 來引用在data里面定義的變量。在 script 標簽中，通過 this.mark 來引用在data里面定義的變量。

data 屬性必須是一個函數，不然 vue 實例之間可能會相互影響，下面我們來看看正確的使用方法和錯誤的使用方法。
正確實例：

data () {
  return {
    mark: 0
  }
}

錯誤實例：

data: { 
  mark: 0
}

3. v-for 循環

在H5平臺上面，使用 v-for 循環整數時與其他平臺存在差異。

比如 v-for=“item in 5” 中，在 H5 平臺上面 item 從 1 開始，其他平臺 item 從 0 開始，下面我們來用代碼驗證一下。
實例：

<view v-for="item in 5">
  {{item}}
</view>

在H5平臺打印結果：

1
2
3
4
5

在小程序平臺打印結果：

0
1
2
3
4

這個差異我們在實際開發過程中一定要注意，不然會出現 H5 平臺與其他平臺顯示不一樣的情況。所以我們在開發過程中應該盡量避免使用 item in X 這樣的語句，如果一定要用的話，我們在循環的時候可以再加上第二個參數 index，表示列表的索引，這樣不管在什么平臺上都是從0開始的。
實例：

<view v-for="(item,index) in 5">
  {{index}}
</view>

在所有平臺打印結果：

0
1
2
3
4

4. 列表渲染 key

在實際開發過程中，列表渲染如果沒有指定 key，會報一個 warning 警告。如果列表的靜態的，里面的數據不會因為頁面的情況的改變而改變，那么這個 warning 就可以忽略。

如果列表會隨著頁面情況的改變而改變，那必須要指定 key，不然會降低渲染效率。原理是：渲染層重新渲染的時候，會校正帶有 key 的組件，提高列表渲染時的效率。

key 指定的數據必須是唯一的字符串或者是數字，且不能動態改變。
實例：

<view v-for="(item, index) in items" :key="index">
  {{item}}
</view>

如果item列表是唯一的，key 也可以直接指定 item 本身。
實例：

<view v-for="item in items" :key="item">
  {{item}}
</view>

5.小結

本小節主要介紹了在 uni-app 框架中，使用 Vue.js 的注意事項，包括生命周期、data屬性、列表渲染等。需要掌握的重點如下：

• 應用生命周期函數僅在 page 頁面有效，組件生命周期函數在 page 頁面和單獨封裝的組件中都有效；
• data 屬性必須是一個函數；
• 在H5平臺上面，使用 v-for 循環整數時與其他平臺存在差異；
• 動態列表渲染如果沒有指定 key，會降低渲染效率。

還有一些命名限制、事件處理、語法支持在 uni-app 官方網站已經寫的比較詳細了，大家可以參考官網：Vue.js注意事項。