vue數據流是不是單向的

本文小編為大家詳細介紹“vue數據流是不是單向的”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue數據流是不是單向的”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

讀到這里，這篇“vue數據流是不是單向的”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。