使用Vue.js注意事項(xiàng)

1. 前言

通過前面小節(jié)的學(xué)習(xí)，我們基本掌握了怎樣用 uni-app 框架來開發(fā)并上線一個(gè)項(xiàng)目應(yīng)用。知道了幾乎所有的前端應(yīng)用都可以用 uni-app 框架進(jìn)行開發(fā)，并且只需要用一套代碼就可以將項(xiàng)目部署到多個(gè)平臺(tái)。

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

由于各個(gè)平臺(tái)的特性，有些 vue 語法在個(gè)別平臺(tái)上面沒有辦法實(shí)現(xiàn)，下面我們會(huì)給大家詳細(xì)講講各個(gè)平臺(tái)使用 Vue.js 語法時(shí)需要注意哪些地方。

2. 生命周期

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

這些生命周期函數(shù)對(duì)應(yīng)的語法，我們?cè)谇懊嫘」?jié)都給大家詳細(xì)的介紹過了，其中比較難以區(qū)分的是「頁面生命周期函數(shù)」和「組件生命周期函數(shù)」。

在日常項(xiàng)目開發(fā)過程中，這兩者之間功能會(huì)有點(diǎn)重復(fù)，我們通常選擇其中一個(gè)使用就可以了。但是要注意的是，應(yīng)用生命周期函數(shù)僅在 page 頁面有效，在單獨(dú)封裝的組件中無效。但是組件生命周期函數(shù)在 page 頁面和單獨(dú)封裝的組件中都有效。

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

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

添加完成后，我們點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，控制臺(tái)中會(huì)打印下面的信息。

組件生命周期函數(shù) beforeCreate：實(shí)例初始化
組件生命周期函數(shù) created：實(shí)例創(chuàng)建完成

可以看到?jīng)]有打印頁面生命周期函數(shù) onLoad?？梢则?yàn)證頁面生命周期函數(shù)在單獨(dú)封裝的組件中無效。

這一點(diǎn)我們?cè)陂_發(fā)過程中一定要注意，如果頁面生命周期函數(shù)沒有執(zhí)行，先要檢查一下是不是在單獨(dú)封裝的組件中運(yùn)行的。

2.data 屬性

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

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

data 屬性必須是一個(gè)函數(shù)，不然 vue 實(shí)例之間可能會(huì)相互影響，下面我們來看看正確的使用方法和錯(cuò)誤的使用方法。
正確實(shí)例：

data () {
  return {
    mark: 0
  }
}

錯(cuò)誤實(shí)例：

data: { 
  mark: 0
}

3. v-for 循環(huán)

在H5平臺(tái)上面，使用 v-for 循環(huán)整數(shù)時(shí)與其他平臺(tái)存在差異。

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

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

在H5平臺(tái)打印結(jié)果：

1
2
3
4
5

在小程序平臺(tái)打印結(jié)果：

0
1
2
3
4

這個(gè)差異我們?cè)趯?shí)際開發(fā)過程中一定要注意，不然會(huì)出現(xiàn) H5 平臺(tái)與其他平臺(tái)顯示不一樣的情況。所以我們?cè)陂_發(fā)過程中應(yīng)該盡量避免使用 item in X 這樣的語句，如果一定要用的話，我們?cè)谘h(huán)的時(shí)候可以再加上第二個(gè)參數(shù) index，表示列表的索引，這樣不管在什么平臺(tái)上都是從0開始的。
實(shí)例：

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

在所有平臺(tái)打印結(jié)果：

0
1
2
3
4

4. 列表渲染 key

在實(shí)際開發(fā)過程中，列表渲染如果沒有指定 key，會(huì)報(bào)一個(gè) warning 警告。如果列表的靜態(tài)的，里面的數(shù)據(jù)不會(huì)因?yàn)轫撁娴那闆r的改變而改變，那么這個(gè) warning 就可以忽略。

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

key 指定的數(shù)據(jù)必須是唯一的字符串或者是數(shù)字，且不能動(dòng)態(tài)改變。
實(shí)例：

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

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

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

5.小結(jié)

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

• 應(yīng)用生命周期函數(shù)僅在 page 頁面有效，組件生命周期函數(shù)在 page 頁面和單獨(dú)封裝的組件中都有效；
• data 屬性必須是一個(gè)函數(shù)；
• 在H5平臺(tái)上面，使用 v-for 循環(huán)整數(shù)時(shí)與其他平臺(tái)存在差異；
• 動(dòng)態(tài)列表渲染如果沒有指定 key，會(huì)降低渲染效率。

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