vue与react的区别

最新推荐文章于 2025-06-28 16:12:30 发布

丶酸酸

最新推荐文章于 2025-06-28 16:12:30 发布

阅读量321

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue react 文章标签： react vue

本文链接：https://blog.csdn.net/a82048195/article/details/109065862

react 同时被 2 个专栏收录

16 篇文章

订阅专栏

vue

12 篇文章

订阅专栏

本文探讨了Vue和React在开发时的写法差异，包括Vue的XML/JS/CSS分离与React的JSX混写，以及两者在编译时和运行时的特点，最后讨论了渲染方面的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue与react的区别

1.开发时
2.编译时
3.运行时
4.渲染

1.开发时

1.写法：

react（jsx）：
calss App extends Component{
	makeJSX(){
		return <div></div>;
	}
	render(){
		return <div></div>;
	}
}

vue:

<template>
  <div class="App">
  </div>
</template>

<script>
...js
</script>

<style>
...css
</style>

react： xml js 可以混着写。判断元素是否显示可以直接用if判断（与jsx判断一样）。
vue： xml / js / css 都是分开写的，不可以混着写。判断元素是否显示需要用固定的语法v-if。

2.编译时

react： 将xml标签 ->js ，所以react的xml和js可以混着写。 没有做编译时优化 =》只做了运行时优化。
vue：  做了编译时优化  语法  主要优化<template></template>部分
vue编译分在线编译（vue本身的代码编译）和离线编译（webpack）

1.createCompilerCreator-->（编译模板的函数）complieToFunctions(template)
 //转义html-->AST
 2.optimize(ast,options);优化AST，标记静态节点。
 3.generate(ast,options);把优化后的AST，转换成可执行的代码。