數據偵聽 Vue.$watch

?watch提供了觀察和響應實例上數據變動的辦法，當有一些數據需要跟隨其他數據變化而變化時，如子組件某個數據依賴來自于父組件的prop計算。很直觀的會想到計算這功能和計算屬性十分類似。Vue建議用戶使用計算屬性，除非如下情況：
（1）當要執行的操作是異步操作時，
（2）相應事件是開銷較大的操作時。

watch: {

question: function (newVal, oldVal) {

this.answer = 'Waiting for you to stop typing...'

axios.get('https://yesno.wtf/api')

.then(function (response) {

vm.answer = _.capitalize(response.data.answer)

})

.catch(function (error) {

vm.answer = 'Error! Could not reach the API. ' + error

})

}

}

}

? 當觀察的值發生改變時, 觀察者會接收到兩個參數：(1) 新值，(2)原先的值。 值得注意的是,watch在組件第一次被掛載時不會觸發, 只有值被改變時才觸發。

watch: {

selectedVal ( newVal, oldVal ) {

console.log(newVal)

}

}

?

data選項為什么是一個函數？

? Vue官網第一課描述的data選項就是一個對象，為什么在編寫組件的時候卻要定義成一個函數？

? 我們知道對象是引用類型，而組件最大的特性就是可復用性，當一個組件被多次復用卻指向同一個引用類型數據，組件間將無獨立性而言。因此，將data選項定義成一個函數，是為了利用函數的私有作用域特性實現不同組件間數據私有的效果
?

計算屬性緩存 及 劫持setter

? 一個需要計算的數據，通常有: (1)計算屬性獲取，(2)定義一個方法實現。雖然實現結果相同，但前者優勢在于計算屬性是基于它們的依賴進行緩存的。也就是說：

（1）計算屬性依賴不改變，計算就不會觸發，改變了才重新觸發計算；而調用方法總會再次執行函數
（2）當依賴不是響應式依賴時, 計算屬性將永遠不會觸發計算。如

computed: {

now () {

return Date.now()

}

}

? 計算屬性默認只有getter，常規用法其實是調用了計算屬性的getter方法。若在需要時也可以提供一個setter，此時, 需要將計算屬性定義為一個對象,setter的含義與原生JS的類似

computed: {

reserveVal: {

get () { // getter

return this.val

},

set (newVal) { // setter

return newVal.split('').reverse().join('')

}

}

}

?

v-if 惰性、緩存 及 使用 <template>

? 我們知道，v-if能決定DOM結構存不存在，而v-show只是控制了DOM元素的display屬性，當頁面切換頻率不高時，Vue建議使用v-if。
? 所謂的惰性，就是當遇到條件為非真時直接跳過，只有第一次遇到真值才開始渲染條件塊。
? 而緩存，官網給出解釋如下：

Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。

? 也就是說，假設頁面原本渲染了一個input標簽，而狀態改變后也有一個input標簽，Vue檢查到新老標簽標簽名和屬性列表都相同。將保留已渲染的標簽繼續使用。
? 這種緩存機制是Vue默認的，想修改這種動作，只要給標簽加上具有唯一值的key屬性即可，

<input placeholder="Enter your username" key="username-input">

? 正常情況下，v-if會被設置在一個標簽元素內使用，當遇到前后兩個或多個兄弟標簽都需要使用相同狀態值來判斷是否渲染時，可以一個無狀態不可見標簽<template>來包裹，Vue在構建DOM時會將其丟棄，并正確的將v-if作用到相應的標簽上。

<template v-if="real">

<div>實體車位</div>

<div>實體車輛</div>

</template>

?

v-if 與 v-for 優先級

? 根據Vue的風格指南，不建議將v-if和v-for放在一起使用，我們來探索一下為什么.

它們一起使用的場景無非就有兩個
（1）希望通過v-if控制v-for代碼塊是否顯示。這種情況下一般v-if變量是個狀態量，與v-for循環變量無關。
（2）希望通過循環變量中的某個屬性的真假值，來控制該項是否應該被循環渲染出來

這兩種用法有什么問題？在Vue語法中有個規則：循環體中，v-for屬性優先級高于其他屬性。也就是說：
場景(1):v-if的渲染會發生在循環之后，列表優先生成，這就無法提前阻止循環列表的渲染。這與我們初衷想要決定循環塊是否渲染產生沖突。解決辦法是：使用<template>標簽包裹并在這里設置v-if控制
場景(2): 如果存在不該被渲染的項，這個項就不應該出現在循環變量中，Vue建議使用計算屬性過濾數組。因此也不再需要v-if
?

v-for 作用于對象

? 循環不止作用于數組，同樣可作用于所有可迭代類型變量中。

在遍歷對象時，通常是按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的。

// 對象遍歷，第一個是值，第二個是鍵，第三個才是索引

<div v-for="(value, key, index) in object" :key="index">

{{ key }} : {{ value }}

</div>

?

v-for渲染后的數組緩存替換規則

? Vue 包含一組觀察數組的變異方法(mutation method)，它們會觸發視圖更新。包括:push()、pop()、shift()、unshift()、splice()、sort()、reserve()等。這些方法都會改變原數組。
? 同樣還包含非變異方法，如filter()、concat()、slice()。他們不改變原數組，而是返回一個新數組。

? 如果我們對已渲染過后的數組進行非變異方法操作，直覺上列表會重新渲染，其實不然。

Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的、啟發式的方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。

exa.items = exa.items.filter(function (item) {

return item.message.match(/Foo/)

})

?

凍結雙向數據綁定

? 如果初始渲染后不想讓視圖層響應模型層變化, 可以使用v-once標簽屬性, 告知被包含在該標簽內部的所有數據綁定不要響應視圖更新

<span v-once>這個數據不會發生改變: {{ message }}</span>

?

綁定一段 HTML

? Vue在html部分, 無論是利用雙大括號{{ }}還是v-model綁定的值都會被解釋為普通文本。如果需要綁定一段 HTML，可以使用v-html

<p v-html="htmlCode"></p>

?

修飾符

(1) .prevent / .stop / .passive

? 如果你遇到過在頁面執行一個Click事件，觸發了兩次函數調用，你則需要檢查一下是否由事件冒泡引起的。 在DOM2級, DOM3級事件標準中, 瀏覽器接受一個點擊交互后, 產生事件流會有兩個過程，捕獲和冒泡。 過程如下:

? 為解決該問題，Vue提供了修飾符.prevent可以告訴v-on指令對于觸發的事件調用event.preventDefault()來阻止瀏覽器的默認行為。.stop則是調用event.stopPropagation()來阻止目標元素的冒泡事件

?.passive不能和.prevent一同使用，它會屏蔽.prevent的冒泡效果。.passive主要使用在移動端，它能提高其性能

(2)鍵盤修飾符 .enter / .tab / .delete ...

? Vue提供監聽鍵盤按鍵鍵值的辦法，方便我們監聽鍵盤事件。一般情況下，直接使用鍵值修飾，如enter鍵的鍵值為13，則使用辦法為：

<input @click.13="handleClick"></input>

? Vue為方便記憶，綁定了常用鍵名與鍵值的關系可直接使用鍵名綁定

<input @click.enter="handleClick"></input>

常用的有：.enter，.tab，.delete，.esc，.space，.up，.down，.left，.right也可以用通過config.keyCodes對象自定義按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1`

Vue.config.keyCodes.f1 = 112

（3）鼠標修飾符

? 鼠標修飾符限制處理函數僅響應特定的鼠標按鈕，包括.left，.right，.middle。
?

動態樣式綁定 :class

? Vue允許動態切換一個樣式, 支持兩種語法：對象形式 | 數組形式

對象辦法：鍵表示樣式類名，值為Truthy表示添加該樣式

<div class="wrap" :class="{ borderTop: boolean, active: isActive }"></div>

（２）給:class傳遞一個數組，表示應用一組樣式

<div :class="[ classA, classB ]"></div>

當v-bind:style使用需要添加瀏覽器引擎前綴的 CSS 屬性時，如transform，Vue.js 會自動偵測并添加相應的前綴。

?

事件綁定傳參

? 如下，前者使用監聽事件，而后者是內聯處理器

<div id="example">

<button @click="handleSubmit">提交</button>

<button @click="say('Hi')">問候</button>

</div>

?

表單輸入綁定

? 對于普通元素如<div> {{ message }} </div>等并沒有真正表現出Vue雙向數據綁定的魅力，其只展現了從ViewModel層發生變化后反饋到View層的單方面特性。而表單輸入的雙向數據綁定還增加了用戶交互使得View層發生改變并響應到ViewModel層，真正體現了“雙向”功能。

?v-model可以在表單元素<input>, <textarea>及<select>上創建雙向數據綁定。Vue會根據空間類型自動選取正確的方法更新元素。值得注意的是，v-model會忽略所有表單元素的value, chekcd, selected特性的初始值而總是將Vue實例的數據data選項作為數據來源。也就是說，不能通過特性自身賦值綁定到v-model上，而需要在data中手動賦初始值

對于單行多行輸入框，經v-model綁定過后的元素中增加內容不會生效，Vue只讀綁定中的內容。
單個復選框，v-model綁定到布爾值；而多個復選框則綁定到同一個數組
單選按鈕，綁定到同一個字符串，其值是value所對應的值
下拉選擇菜單，單選時綁定到一個值上，多選時綁定到一個數組

# 單選下拉框去掉 multiple屬性即可

<select v-model="selected" multiple>

<option v-for="opt in options" v-bind:value="opt .value">

{{ opt .text }}

</option>

</select>

<span>Array: {{ selected }}</span>

?

表單綁定修飾符

.lazy：將input觸發的更新延遲至change觸發

<input v-model.lazy="msg" >

.number：將用戶輸入的內容轉化為數字，否則總是返回字符串。設置type屬性移動端可以調起數字鍵盤。如果這個值無法被parseFloat()解析，則會返回原始的值

<input v-model.number="age" type="number">

.trim：自動過濾用戶輸入的首尾空白字符

<input v-model.trim="msg">

?

Vue.$emit參數，及與 v-on 事件命名規范

? 在剛開始開發時可能會思考為什么prop沒有子向父傳遞。不幸運的是，prop的逆向會給數據流向帶來巨大的維護和理解困難，這也是為什么Vue封裝了$emit的模式 觸發事件來取而代之的原因

this.$emit('method-name', param)

第一個參數是拋出的事件名，對應父級v-on事件名，第二個參數是要帶出的數據，該數據使用$event捕獲

<Children @click="$emit('enlarge-text', 0.1)"> Enlarge text </Children >

<blog @enlarge-text="postFontSize += $event"></blog>

通常父組件中會綁定給一個屬性，該屬性定義為一個方法且它的第一個參數就是被帶出來的數據

<blog @enlarge-text="enlargeText"></blog>

methods: {

enlargeText (num) {

this.postFontSize += num

}

}

【注意】不同于組件和prop，經$emit拋出的事件名不會被用作一個JavaScript變量 名或屬性名，所以就沒有理由使用camelCase(駝峰式)或PascalCase(短線式)。因為HTML大小寫不明感因素，v-on事件監聽器在DOM模板中實質上會被自動轉換為全小寫，所以駝峰式命名規則將全部失效無法監聽。建議使用短線式或全小寫，特別是前者

<my-component v-on:my-event="handleEmit"></my-component>  // 禁止使用myEvent

?

動態組件

? 比如我們有一個tab欄，其中有三個tab頁，點擊不同tab頁需切換至不同的組件下，此時非常適合使用is來指定不同的組件達到動態組件效果，如下

Vue.component('tab-home', {

template: '<div>Home component</div>'

})

...

new Vue({

el: '#demo',

data: {

currentTab: 'Home',

tabs: ['Home', 'Posts', 'Archive']

},

computed: {

currentTabComponent () {

return 'tab-' + this.currentTab.toLowerCase()

}

}

})

<component :is="currentTabComponent"></component>

?
?

Prop傳遞數據防臟

? 所有的prop都使得其父子組件形成一個單向下行綁定，父級prop的更新會流動到子組件中，但反過來不行。這種設計辦法是為了防止子組件意外改變父組件的狀態，從而導致你的應用的數據流向難以理解。另外，如果該數據還被其他子組件使用，也將受影響，產生洪水式災難。因此不應該在子組件中設計修改prop數據的操作。

在Javascript中對象和數組都是通過引用傳入的，因此對于引用類型的prop來說，在子組件中修改數據本身將直接改變父級的數據。

? 常見的試圖改變prop的操作有一下兩種情形：

接收的prop作為一個初始值，這個子組件接下來希望將其作為一個本地的prop數據來使用。這種情況下應該使用子組件中的data來拷貝一份prop數據數據

prop: [ 'initialNum' ],

data () {

return {

num: this.initialNum

}

}

接收的prop作為原始的值需要進行格式轉換。這種情況下，應該使用計算屬性來實現

props: ['size'],

computed: {

normalizedSize () {

return this.size.trim().toLowerCase()

}

}

? 當不需要對prop做改變只是進行使用時可以不用data拷貝，但也需要注意使用，曾經遇到將==寫成=，花了不少時間找bug。當系統比較龐大時這種問題不好找，所以大家一定要細心實在不行就多做個data拷貝。
?

prop自定義檢查函數

? Vue允許在進行prop傳值時對值進行驗證，type可以驗證數據類型，default可以設置當未傳入時的默認值。除此之外，還允許開發者們自定義驗證函數

function CheckName (firstName, lastName) {

this.firstName = firstName

this.lastName = lastName

}

? 驗證辦法如下

prop: {

userName: CheckName

}

?

Prop與自身屬性重名問題

? 當使用ElementUI或Bootstrap這些第三方插件時，往往他們定義有自己的屬性，如果開發者們自定義的prop屬性與其發生重名時，Vue在大多數情況下，從外部提供給組件的值會替換掉組件內部設置好的值。

? 即假設存在傳入type="text"就會替換掉本身type="date"類型，原來的就會被破壞。慶幸的是，class和style會智能一些，即兩邊的值會合并起來
?

Prop實現‘雙向綁定’效果.sync修飾符

? Vue不是不建議子組件改變父組件屬性嗎？為什么還要給prop做"雙向綁定"？我第一想法就是這樣的。

? 其實他只是作為一種語法糖存在，并且具有可替代辦法。他的應用場景就是：prop的值如果需要根據子組件的操作響應修改，則可以使用該語法糖

總結

以上是生活随笔為你收集整理的Vue 2 难点汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。