vue數據流是單向嗎

是單向的。雖然vue有雙向綁定“v-model”，但是vue父子組件之間數據傳遞，仍然還是遵循單向數據流的，父組件可以向子組件傳遞props，但是子組件不能修改父組件傳遞來的props，子組件只能通過事件通知父組件進行數據更改。

本教程操作環境：windows7系統、vue3版，DELL G3電腦。

vue是單向數據流，數據流向是從上到下，從父組件傳遞到子組件的。

不要和vue的雙向數據綁定搞混了；雙向數據綁定說的是視圖和模板之間的渲染關系，并不是數據的流向關系!

vue父子組件之間數據傳遞是遵循單向數據流的，父組件可以向子組件傳遞props，但是子組件不能修改父組件傳遞來的props，子組件只能通過事件通知父組件進行數據更改。

1，單向數據流：

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態，從而導致你的應用的數據流向難以理解。

額外的，每次父級組件發生變更時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變 prop。如果你這樣做了，也將會改變父組件的狀態。

2，Prop是通過引用傳入的：

注意在 JavaScript 中對象和數組是通過引用傳入的，所以對于一個數組或對象類型的 prop 來說，在子組件中改變變更這個對象或數組本身將會影響到父組件的狀態。

深入理解 Vue 單向數據流

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 的值并返回。

【