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(&#39;currency-input&#39;, {
  template: &#39;\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  &#39;,
  props: [&#39;value&#39;], // 为什么这里要用 value 属性，value在哪里定义的？
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 位小数
        .slice(
          0,
          value.indexOf(&#39;.&#39;) === -1
            ? value.length
            : value.indexOf(&#39;.&#39;) + 3
        )
      // 如果值尚不合规，则手动覆盖为合规的值
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件带出数值
      // <!--为什么这里把 &#39;input&#39; 作为触发事件的事件名？`input` 在哪定义的？-->
      this.$emit(&#39;input&#39;, 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(&#39;checkbox&#39;, {
  tempalte: &#39;<input type="checkbox" @change="change" :checked="currentValue"/>&#39;
  props: [&#39;value&#39;],
  data: function () {
        return {
            //这里为什么要定义一个局部变量，并用 prop 的值初始化它。
            currentValue: this.value
        };
    },
  methods: {
    change: function ($event) {
      this.currentValue = $event.target.checked;
      this.$emit(&#39;input&#39;, 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 的值並回傳。

【相關推薦：vuejs影片教學、web前端開發】

以上是vue資料流是單向嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！