vue.js - react中的双向绑定和vue中双向绑定是一回事吗？

Question

react中的双向绑定和vue中双向绑定是一回事吗？

react中的双向绑定我只在表单上看到。

function Com() {
    const [text, setText] = useState(""):
    return <input value={text} onChange={(event) => setText(event.target.value) } /> 
}

vue中的双向绑定(v-model)我感觉它是同步父子组件上的两个可响应数据(这么做的原因应该是希望在子组件上改变时，父组件也跟着改变。)。

Answer 1

React 没有双向绑定, 都是单向数据流, 你这样写也只是复刻了v-model的语法糖而已

Answer 2

双向绑定只是JS渲染页面的一种方式，和开发框架无关。
v-model是VUE提供的语法糖，就像React使用类似useRequest的hook其实也是setState的二次封装一样。

Answer 3

本质上是一回事，文档中是这样说的：

表单输入绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：

<input :value="text" @input="event => text = event.target.value">

v-model 指令帮我们简化了这一步骤：

<input v-model="text">

表单输入绑定 | Vue.js

但是 Vue 的 v-model 会额外做一些处理，来防止一些对象上的属性丢失响应式：

export function genAssignmentCode(value: string, assignment: string): string {
  const res = parseModel(value)
  if (res.key === null) {
    return `${value}=${assignment}`
  } else {
    return `$set(${res.exp}, ${res.key}, ${assignment})`
  }
}

vue/src/compiler/directives/model.ts at main · vuejs/vue

---

不过我们在 Vue 项目开发中很可能会因为 VueJS 的自动化让自己变得粗心大意，直到自己遇到这样两个问题：

• 为什么 v-model 绑定的对象属性不是总是响应式？
• Vue 中 v-bind 绑定的 value 值和元素的 value 值（受控组件和非受控组件）

Answer 4

这个问题很难回答。

1. 原则上来说，所有 MVVM 框架的数据绑定都是一回事，即：把视图状态抽象出来，用数据表示。开发者不需要手动操作视图，只要维护数据逻辑即可。考虑到软件本质上就是用数据表达现实世界，所以这种框架可以大大节省开发时间。

2. 具体实现，两者肯定是不同的。具体的差异我在这里不再详述，只说面试的时候我比较期待听到的逻辑要点：

   1. 收集数据变化。Vue2 用隐式 getter/setter；Vue3 用 proxy；React 用 setState
   2. 虚拟 DOM 判断是否要改变视图
   3. 真正修改视图
   4. 如果优化
   5. 可能产生什么问题

Answer 5

React 和 Vue 中的“双向绑定”在概念上相似，但实现方式和上下文略有不同。

在 React 中，并没有内建的“双向绑定”概念，像你所展示的，React 开发者通常使用状态（state）和属性（props）结合事件处理器（如 onChange）来模拟双向绑定。这种模式在表单元素上特别常见，因为你需要确保输入的值与组件的状态保持同步。

在 Vue 中，v-model 是一个指令，它确实提供了双向绑定的功能。v-model 在内部使用了不同的属性（如 value 用于元素的值，以及 input 事件用于监听值的变化）来创建一个从 DOM 输入到 Vue 实例数据的双向绑定。

关于你提到的 Vue 中 v-model 同步父子组件数据，虽然 v-model 通常在模板中使用来绑定表单元素，但你也可以在自定义组件中使用 v-model。在这种情况下，v-model 实际上是一个语法糖，它允许你更简洁地实现父子组件之间的数据传递和更新。在 Vue 2.x 中，v-model 默认使用 value 作为 prop 和 input 作为事件；在 Vue 3.x 中，你可以通过 modelValue 和 update:modelValue 来自定义这些名称。

总结来说：

• React 中的“双向绑定”是通过状态、属性和事件处理器来实现的，特别是在表单元素上。
• Vue 中的 v-model 是一个内建的双向绑定指令，它可以直接在模板和表单元素上使用，也可以用于自定义组件，实现父子组件之间的数据同步。

React 示例（使用函数组件和 Hooks）：

import React, { useState } from 'react';

function Com() {
  const [text, setText] = useState("");
  return <input value={text} onChange={(event) => setText(event.target.value)} />;
}

Vue 示例（使用 v-model）：

<template>
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

Vue 自定义组件中使用 v-model 的示例：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent v-model="parentMessage" />
  <p>Parent received: {{ parentMessage }}</p>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: ''
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  }
}
</script>

注意：在 Vue 3 中，自定义组件的 v-model 示例可能略有不同，因为 Vue 3 提供了更灵活的自定义选项。