易尔通网站建设,用python做网站的步骤,介绍类网站建设策划书范文,wordpress 搜索没反应vue和react的区别总是被提及#xff0c;关于这个问题最近也有了自己的想法。我认为它们之间最大的区别是对于响应数据变化的实现方式不同。
vue实现响应的方法是#xff0c;首先收集依赖这个数据的副作用#xff08;视图更新、计算属性等#xff09;#xff0c;当数据修改…vue和react的区别总是被提及关于这个问题最近也有了自己的想法。我认为它们之间最大的区别是对于响应数据变化的实现方式不同。
vue实现响应的方法是首先收集依赖这个数据的副作用视图更新、计算属性等当数据修改时统一调用依赖这个数据的副作用完成响应。
react实现响应的方法是需要对比两次数据是否相同修改前和修改后数据相同则不更新组件否则触发响应更新整个组件包括子组件。
script setup
import { ref, watch } from vueconst question ref()watch(question, async (newQuestion) {console.log(newQuestion)
})
/scripttemplatepAsk a yes/no question:input v-modelquestion //ppquestion: {{ question }}/p
/template在这个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 reactexport default function AboutQuestion() {const [question, setQuestion] useState()useEffect(() {console.log(question)}, [question])return (pAsk a yes/no question:input onInput{(ev) {setQuestion(ev.target.value)}} //ppquestion: {question}/p/)
}当setState触发时会重新执行整个AboutQuestion函数包括useState和useEffect都会被重新执行只有整个函数执行了才有机会再次判断依赖是否更新从而执行对应的副作用。useEffect会对比本次的question和上一次的变量question不一样则会执行其第一个入参函数。重新执行的函数AboutQuestion会返回新的virtualDOM后diff根据结果更新真实DOM。
从这个过程里可以看出来react需要保持数据不可变如果数据变了useEffect和setSstate是无法正常对比出前后数据的差异的从而无法正常执行。
所以在react中数据流向是严格从上往下事件是从下往上。子组件想要改变数据只能通过数据源组件提供的方法修改直接修改是不起作用的。
以上就是我理解的react和vue最重要的区别。
