深入理解Vue 單向數據流的原理

單向數據流是什么

單向數據流指只能從一個方向來修改狀態。下圖是單向數據流的極簡示意：

單向數據流的極簡示意

與單向數據流對對應的是雙向數據流（也叫雙向綁定）。在雙向數據流中，Model（可以理解為狀態的集合） 中可以修改自己或其他Model的狀態， 用戶的操作（如在輸入框中輸入內容）也可以修改狀態。這使改變一個狀態有可能會觸發一連串的狀態的變化，最后很難預測最終的狀態是什么樣的。使得代碼變得很難調試。如下圖所示：

與雙向數據流比，在單向數據流中，當你需要修改狀態，完全重新開始走一個修改的流程。這限制了狀態修改的方式，讓狀態變得可預測，容易調試。

單向數據流的使用場景

多個組件會共享狀態時，共享狀態和組件間（兄弟組件）通信變的不容易。我們把共享狀態抽取出來，用單向數據流的方式會變得容易。

從v-model開始講起

1、v-model 用在 input 元素上

v-model在使用的時候很像雙向綁定的（實際上也是。。），但是 Vue 是單項數據流，v-model 只是語法糖而已：

<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />

第一行的代碼其實只是第二行的語法糖。然后第二行代碼還能簡寫成這樣：

<input :value="something" @input="something = $event.target.value" />

要理解這行代碼，首先你要知道 input 元素本身有個 oninput 事件，這是 HTML5 新增加的，類似 onchange ，每當輸入框內容發生變化，就會觸發 oninput ，通過 $event 把最新的 value 傳遞給 something。

我們仔細觀察語法糖和原始語法那兩行代碼，可以得出一個結論： 在給 input 元素添加 v-model 屬性時，默認會把 value 作為元素的屬性，然后把 'input' 事件作為實時傳遞 value 的觸發事件

2、v-model 用在組件上

v-model 不僅僅能在 input 上用，在組件上也能使用，拿官網上的demo看。

<currency-input v-model="price"></currency-input>
Vue.component('currency-input', {
 template: '\
 <span>\
 $\
 <input\
 ref="input"\
 v-bind:value="value"\
 v-on:input="updateValue($event.target.value)"\
 >\
 </span>\
 ',
 props: ['value'], // 為什么這里要用 value 屬性，value在哪里定義的？
 methods: {
 // 不是直接更新值，而是使用此方法來對輸入值進行格式化和位數限制
 updateValue: function (value) {
 var formattedValue = value
 // 刪除兩側的空格符
 .trim()
 // 保留 2 位小數
 .slice(
 0,
 value.indexOf('.') === -1
 ? value.length
 : value.indexOf('.') + 3
 )
 // 如果值尚不合規，則手動覆蓋為合規的值
 if (formattedValue !== value) {
 this.$refs.input.value = formattedValue
 }
 // 通過 input 事件帶出數值
 // <!--為什么這里把 'input' 作為觸發事件的事件名？`input` 在哪定義的？-->
 this.$emit('input', Number(formattedValue))
 }
 }
})

如果你知道這兩個問題的答案，那么恭喜你真正掌握了 v-model，如果你沒明白，那么可以看下這段代碼：

<currency-input v-model="price"></currency-input>
所以在組件中使用時，它相當于下面的簡寫：
//上行代碼是下行的語法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>

所以，給組件添加 v-model 屬性時，默認會把 value 作為組件的屬性，然后把 'input' 值作為給組件綁定事件時的事件名。這在寫組件時特別有用。

3、v-model 的缺點和解決辦法

在創建類似復選框或者單選框的常見組件時，v-model就不好用了。

<input type="checkbox" v-model="something" />

v-model 給我們提供好了 value 屬性和 oninput 事件，但是，我們需要的不是 value 屬性，而是 checked 屬性，并且當你點擊這個單選框的時候不會觸發 oninput 事件，它只會觸發 onchange 事件。

因為 v-model 只是用到了 input 元素上，所以這種情況好解決：

<input type="checkbox" :checked="value" @change="change(value, $event)"

當 v-model 用到組件上時：

<checkbox v-model="value"></checkbox>

Vue.component('checkbox', {
 tempalte: '<input type="checkbox" @change="change" :checked="currentValue"/>'
 props: ['value'],
 data: function () {
 return {
 //這里為什么要定義一個局部變量，并用 prop 的值初始化它。
 currentValue: this.value
 };
 },
 methods: {
 change: function ($event) {
 this.currentValue = $event.target.checked;
 this.$emit('input', this.currentValue); 
 }
})

在 Vue 2.2 版本，你可以在定義組件時通過 model 選項的方式來定制 prop/event 。

4、vue 組件數據流

從上面 v-model 的分析我們可以這么理解，雙向數據綁定就是在單向綁定的基礎上給可輸入元素（input、textare等）添加了 change(input) 事件，來動態修改 model 和 view ，即通過觸發（$emit）父組件的事件來修改mv來達到 mvvm 的效果。而 vue 組件間傳遞數據是單向的，即數據總是由父組件傳遞到子組件，子組件在其內部可以有自己維護的數據，但它無權修改父組件傳遞給它的數據，當開發者嘗試這樣做的時候，vue 將會報錯。這樣做是為了組件間更好的解耦，在開發中可能有多個子組件依賴于父組件的某個數據，假如子組件可以修改父組件數據的話，一個子組件變化會引發所有依賴這個數據的子組件發生變化，所以 vue 不推薦子組件修改父組件的數據，直接修改 props 會拋出警告。流程圖如下：

所以，當你想要在子組件去修改 props 時，把這個子組件當成父組件那樣用，所以就有了

1、定義一個局部變量，并用 prop 的值初始化它。
2、定義一個計算屬性，處理 prop 的值并返回。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com