站長資訊網
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>
v-model的實現原理
- 放在組件上
父組件
<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元素上
其實上文已經體現了
<input v-model=“phoneInfo.phone”/> <input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"
以上兩句是相等的
TIPS
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修飾符分別在組件單個屬性、多個屬性需要雙向綁定下使用，這是二者使用的場景
