數(shù)據(jù)偵聽 Vue.$watch

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

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

})

}

}

}

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

watch: {

selectedVal ( newVal, oldVal ) {

console.log(newVal)

}

}

?

data選項為什么是一個函數(shù)？

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

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

計算屬性緩存 及 劫持setter

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

（1）計算屬性依賴不改變，計算就不會觸發(fā)，改變了才重新觸發(fā)計算；而調(diào)用方法總會再次執(zhí)行函數(shù)
（2）當(dāng)依賴不是響應(yīng)式依賴時, 計算屬性將永遠(yuǎn)不會觸發(fā)計算。如

computed: {

now () {

return Date.now()

}

}

? 計算屬性默認(rèn)只有getter，常規(guī)用法其實是調(diào)用了計算屬性的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結(jié)構(gòu)存不存在，而v-show只是控制了DOM元素的display屬性，當(dāng)頁面切換頻率不高時，Vue建議使用v-if。
? 所謂的惰性，就是當(dāng)遇到條件為非真時直接跳過，只有第一次遇到真值才開始渲染條件塊。
? 而緩存，官網(wǎng)給出解釋如下：

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

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

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

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

<template v-if="real">

<div>實體車位</div>

<div>實體車輛</div>

</template>

?

v-if 與 v-for 優(yōu)先級

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

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

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

v-for 作用于對象

? 循環(huán)不止作用于數(shù)組，同樣可作用于所有可迭代類型變量中。

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

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

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

{{ key }} : {{ value }}

</div>

?

v-for渲染后的數(shù)組緩存替換規(guī)則

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

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

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

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

return item.message.match(/Foo/)

})

?

凍結(jié)雙向數(shù)據(jù)綁定

? 如果初始渲染后不想讓視圖層響應(yīng)模型層變化, 可以使用v-once標(biāo)簽屬性, 告知被包含在該標(biāo)簽內(nèi)部的所有數(shù)據(jù)綁定不要響應(yīng)視圖更新

<span v-once>這個數(shù)據(jù)不會發(fā)生改變: {{ message }}</span>

?

綁定一段 HTML

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

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

?

修飾符

(1) .prevent / .stop / .passive

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

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

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

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

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

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

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

<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）鼠標(biāo)修飾符

? 鼠標(biāo)修飾符限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕，包括.left，.right，.middle。
?

動態(tài)樣式綁定 :class

? Vue允許動態(tài)切換一個樣式, 支持兩種語法：對象形式 | 數(shù)組形式

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

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

（２）給:class傳遞一個數(shù)組，表示應(yīng)用一組樣式

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

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

?

事件綁定傳參

? 如下，前者使用監(jiān)聽事件，而后者是內(nèi)聯(lián)處理器

<div id="example">

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

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

</div>

?

表單輸入綁定

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

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

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

# 單選下拉框去掉 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觸發(fā)的更新延遲至change觸發(fā)

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

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

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

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

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

?

Vue.$emit參數(shù)，及與 v-on 事件命名規(guī)范

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

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

第一個參數(shù)是拋出的事件名，對應(yīng)父級v-on事件名，第二個參數(shù)是要帶出的數(shù)據(jù)，該數(shù)據(jù)使用$event捕獲

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

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

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

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

methods: {

enlargeText (num) {

this.postFontSize += num

}

}

【注意】不同于組件和prop，經(jīng)$emit拋出的事件名不會被用作一個JavaScript變量 名或?qū)傩悦跃蜎]有理由使用camelCase(駝峰式)或PascalCase(短線式)。因為HTML大小寫不明感因素，v-on事件監(jiān)聽器在DOM模板中實質(zhì)上會被自動轉(zhuǎn)換為全小寫，所以駝峰式命名規(guī)則將全部失效無法監(jiān)聽。建議使用短線式或全小寫，特別是前者

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

?

動態(tài)組件

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

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傳遞數(shù)據(jù)防臟

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

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

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

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

prop: [ 'initialNum' ],

data () {

return {

num: this.initialNum

}

}

接收的prop作為原始的值需要進(jìn)行格式轉(zhuǎn)換。這種情況下，應(yīng)該使用計算屬性來實現(xiàn)

props: ['size'],

computed: {

normalizedSize () {

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

}

}

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

prop自定義檢查函數(shù)

? Vue允許在進(jìn)行prop傳值時對值進(jìn)行驗證，type可以驗證數(shù)據(jù)類型，default可以設(shè)置當(dāng)未傳入時的默認(rèn)值。除此之外，還允許開發(fā)者們自定義驗證函數(shù)

function CheckName (firstName, lastName) {

this.firstName = firstName

this.lastName = lastName

}

? 驗證辦法如下

prop: {

userName: CheckName

}

?

Prop與自身屬性重名問題

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

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

Prop實現(xiàn)‘雙向綁定’效果.sync修飾符

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。