vue是單項資料流。雖然vue有雙向綁定“v-model”，但是vue父子組件之間資料傳遞，仍然還是遵循單向資料流的，父元件可以向子元件傳遞props，但是子元件不能修改父元件傳遞來的props ，子元件只能透過事件通知父元件進行資料變更。
本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
簡而言之，雙向綁定就是model的更新會觸發view的更新，view的更新會觸發model的更新，它們的作用是相互的
[圖片上傳失敗...(image-81a06f-1556975918443)]
#簡而言之，單向資料流是model的更新會觸發view的更新，view的更新不會觸發model的更新，它們的作用是單向的
這不是廢話嗎，大家都知道的
下面就是真正的乾貨了，板凳坐好
<ul> <li>Vue是单向数据流，不是双向绑定</li> <li>Vue的双向绑定不过是语法糖</li> <li>Object.definePropert是用来做响应式更新的</li> </ul>
父元件
<AnalysisSub v-model="phoneInfo" :zip-code.sync="zipCode" /
子元件
<template>
<div>
<input
:value="phoneInfo.phone"
type="number"
placeholder="手机号"
@input="handlePhoneChange"
/>
<input
:value="zipCode"
type="number"
placeholder="邮编"
@input="handleZipCodeChange"
/>
</div></template><script>export default {
name: "PersonalInfo",
model: {
prop: "phoneInfo", // 默认 value
event: "change" // 默认 input
},
props: {
phoneInfo: Object,
zipCode: String
},
methods: {
handlePhoneChange(e) {
this.$emit("change", {
...this.phoneInfo,
phone: e.target.value
});
},
handleZipCodeChange(e) {
this.$emit("update:zipCode", e.target.value);
}
}
};</script>父元件的寫法等同於
<AnalysisSub :phone-info="phoneInfo" @change="val => (phoneInfo = val)"
:zip-code="zipCode" @update:zipCode="val => (zipCode = val)"/>其實上文已經體現了
<input v-model=“phoneInfo.phone”/>
<input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"以上兩句是相等的
model 2.2.0
允許一個自訂元件在使用v-model 時自訂prop 和event。預設情況下，一個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入類型比如單選框和複選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以避免這些情況所產生的衝突。
.sync修飾符 2.3.0
在某些情況下，我們可能需要對一個 prop 進行「雙向綁定」。不幸的是，真正的雙向綁定會帶來維護上的問題，因為子元件可以修改父元件，且在父元件和子元件都沒有明顯的改動來源。
所以說呢， vue還是單向資料流，v-model只不過是語法糖，它是:value= "sth"和@change="val => sth = val"的簡寫形式。我們通常在面試當中被提問，Vue是怎麼實現資料響應式更新的，面試官期望聽到的回答是透過Object.defineProperty()的get#和 set方法來實作響應式更新。
v-model和.sync修飾符分別在元件單一屬性、多個屬性需要雙向綁定下使用，這是二者使用的場景
相關推薦：《 vue.js教程》
以上是vue是單項資料流還是雙向資料流的詳細內容。更多資訊請關注PHP中文網其他相關文章！
