vue是单项数据流还是双向数据流

PHP中文网 • 2025年3月11日 22:38:13 • 编程技术 • 阅读 2

vue是单项数据流。虽然vue有双向绑定“v-model”，但是vue父子组件之间数据传递，仍然还是遵循单向数据流的，父组件可以向子组件传递props，但是子组件不能修改父组件传递来的props，子组件只能通过事件通知父组件进行数据更改。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

双向绑定

简而言之，双向绑定就是model的更新会触发view的更新，view的更新会触发model的更新，它们的作用是相互的
[图片上传失败…(image-81a06f-1556975918443)]

单向数据流

简而言之，单向数据流就是model的更新会触发view的更新，view的更新不会触发model的更新，它们的作用是单向的

立即学习“前端免费学习笔记（深入）”；

这不是废话吗，谁都知道的

下面就是真正的干货了，板凳坐好

登录后复制Vue是单向数据流，不是双向绑定Vue的双向绑定不过是语法糖Object.definePropert是用来做响应式更新的

v-model的实现原理

放在组件上

父组件

子组件

            
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);    }  }};

登录后复制

父组件的写法等同于

  (phoneInfo = val)"    :zip-code="zipCode"  @update:zipCode="val => (zipCode = val)"/>

登录后复制放在input元素上

其实上文已经体现了

 { 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修饰符分别在组件单个属性、多个属性需要双向绑定下使用，这是二者使用的场景