本教程操作环境：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 }"
以上两句是相等的
tipsmodel 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是单项数据流还是双向数据流的详细内容。