react和vue在响应式上的不同理解_vue响应式和react

vue和react的区别总是被提及，关于这个问题最近也有了自己的想法。我认为它们之间最大的区别是对于响应数据变化的实现方式不同。

vue实现响应的方法是，首先收集依赖这个数据的副作用（视图更新、计算属性等），当数据修改时统一调用依赖这个数据的副作用完成响应。

react实现响应的方法是，需要对比两次数据是否相同，修改前和修改后数据相同则不更新组件，否则触发响应，更新整个组件，包括子组件。

<script setup>
import { ref, watch } from 'vue'

const question = ref('')

watch(question, async (newQuestion) => {
  console.log(newQuestion)
})
</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" />
  </p>
  <p>question: {{ question }}</p>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这个vue例子里：question是一个响应对象，而watch的第二个参数就是监听对象question变化的副作用，除了watch的第二个参数还有视图中的input的第二个p元素都在监听question这个响应对象的变化。

在question这个响应对象变化后并不需要重新执行setup这个函数来对比变化前后的值，所以setup函数中的ref('')、watch(..., ...)等并没有被重新执行。

在vue中数据是可变的，而副作用监听数据的变化。所以在vue中props中的数据是可以被改的，并且vue本身还能够支持props数据变化之后的响应。vue中并不是严格的数据从上往下，事件从下往上的机制。vue的响应以数据源中心向外辐射，换句话说只要数据改了vue就能响应变化，无论这个数据是在什么地方改的。

import { useState, useEffect } from 'react'

export default function AboutQuestion() {
  const [question, setQuestion] = useState('')

  useEffect(() => {
    console.log(question)
  }, [question])

  return (
    <>
      <p>
        Ask a yes/no question:
        <input onInput={(ev) => {setQuestion(ev.target.value)}} />
      </p>
      <p>question: {question}</p>
    </>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

当setState触发时会重新执行整个AboutQuestion函数，包括useState和useEffect都会被重新执行，只有整个函数执行了才有机会再次判断依赖是否更新从而执行对应的副作用。useEffect会对比本次的question和上一次的变量question不一样则会执行其第一个入参函数。重新执行的函数AboutQuestion会返回新的virtualDOM后diff根据结果更新真实DOM。

从这个过程里可以看出来react需要保持数据不可变，如果数据变了useEffect和setSstate是无法正常对比出前后数据的差异的，从而无法正常执行。

所以在react中数据流向是严格从上往下，事件是从下往上。子组件想要改变数据，只能通过数据源组件提供的方法修改，直接修改是不起作用的。

以上就是我理解的react和vue最重要的区别。