使用vue.js需要注意：1、過(guò)濾器主要用于簡(jiǎn)單的文本轉(zhuǎn)換；2、computed和methods的區(qū)別；3、key的使用；4、數(shù)組的使用；5、組件的使用；6、組件通信。

本文環(huán)境：windows10、vue2.9，本文適用于所有品牌的電腦。

（學(xué)習(xí)視頻分享：javascript視頻教程）

使用vue.js需要注意以下問(wèn)題：

1、過(guò)濾器主要用于簡(jiǎn)單的文本轉(zhuǎn)換，如果要實(shí)現(xiàn)復(fù)雜的數(shù)據(jù)變換，應(yīng)使用計(jì)算屬性

2、指令的使用

• v-bind基本用于HTML元素上的屬性，如id、class、href、src等

• v-on用來(lái)綁定事件監(jiān)聽(tīng)器，如click、dblclick、keyup、mousemove等，method內(nèi)的this指向的是當(dāng)前Vue實(shí)例

• v-show不能使用在template上

• – v-if 和 v-show使用場(chǎng)景

• v-if 條件為false則不會(huì)編譯渲染元素。v-show只是簡(jiǎn)單的CSS屬性切換，無(wú)論true/false，都會(huì)編譯。v-if適合條件不常改變的場(chǎng)景v-show適用頻繁切換條件

3、computed和methods的區(qū)別

• methods有括號(hào)（），computed不帶括號(hào)。

• computed是基于它的依賴(lài)緩存，只有相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新取值。

• methods在重新渲染的時(shí)候，函數(shù)總會(huì)重新調(diào)用執(zhí)行。

4、key的使用

Vue渲染元素時(shí)，考慮效率，會(huì)盡可能復(fù)用已有的元素。此時(shí)需要在被重用的元素加上key屬性

<input key="go">

5、數(shù)組的使用

• filter()、concat()、slice()不會(huì)更改原數(shù)組，將返回一個(gè)新數(shù)組

• 用新數(shù)組替換原數(shù)組，無(wú)性能影響。Vue渲染時(shí)，會(huì)盡量復(fù)用DOM元素

  部分?jǐn)?shù)組變動(dòng)無(wú)法被Vue檢測(cè)到，并更新視圖

• app.books[3]={}app.books.length=1以上情況可以分別使用Vue.set和app.books.splice(1)處理

6、組件的使用

<table>、<ul>、<ol>、<select>等標(biāo)簽受HTML限制，只允許出現(xiàn)限制的標(biāo)簽，自定義的組件標(biāo)簽是無(wú)效的。
這時(shí)候可以使用is屬性?huà)燧d組件

<table>         <tbody is="my-component"></tbody> </table>

<tbody>渲染時(shí)會(huì)替換為組件my-component的內(nèi)容

注：但使用字符串模板時(shí)，不受限。如.vue文件

7、組件通信

• 父->子 prop

• 子->父 $emit v-model