最近面到很多大公司的時候，小編都會碰到一個很尷尬的問題，很多大公司的技術棧都是React，但是小編學的是Vue，其實從本質上來說兩者都是比較優秀的前端框架，所以有些面試官會問到Vue和React的區別。小編認真整理了一些自己所知道的Vue和React的區別，給大家分享分享。
1. 樣版語法 vs JSX
樣版範例（Vue） ：
<template> <div> <p>Hello, world!</p> <my-button @click="handleClick">Click me</my-button> </div></template><script>// 定義一個按鈕元件Vue.component('my-button', { template: '<button><slot></slot></button>'});export default { methods: { handleClick() { console.log('Button clicked'); } }};</script>
JSX 範例（React） ：
import React from 'react';// 使用 JSX 描述一個簡單的按鈕元件const Button = ({ onClick, children }) => { return <button onClick={onClick}>{children}</button>;};// 在 JSX 中使用 Button 元件const App = () => { const handleClick = () => { console.log('Button clicked'); }; return ( <div> <p>Hello, world!</p> <Button onClick={handleClick}>Click me</Button> </div> );};export default App;
2. 元件通訊
Vue 元件通訊範例 ：
父元件向子元件傳遞數據：
<template> <div> <child-component :message="parentMessage"></child-component> </div></template><script>import ChildComponent from './ChildComponent.vue';export default { data() { return { parentMessage: 'Message from parent' }; }, components: { ChildComponent }};</script>
子元件接收數據：
<template> <div> <p>{{ message }}</p> </div></template><script>export default { props: { message: String }};</script>
React 元件通訊範例 ：
父元件向子元件傳遞數據：
import React from 'react';import ChildComponent from './ChildComponent'; class ParentComponent extends React.Component { render() { return ( <div> <ChildComponent message="Message from parent" /> </div> ); }}export default ParentComponent;
子元件接收數據：
import React from 'react'; class ChildComponent extends React.Component { render() { return ( <div> <p>{this.props.message}</p> </div> ); }}export default ChildComponent;
這些範例演示了父元件向子元件傳遞數據的過程。在 Vue 中，透過 props 將數據傳遞給子元件；在 React 中，也是透過 props 實作相同的功能。
3. 狀態管理
4. 生命周期
5. diff演算法
React 的 diff 演算法 ：
Vue 的 diff 演算法 ：
6.不同的頁面更新的通知方式
7.不同的監聽方式
早期的Vue與React
當然，隨之而來的是不同的效能問題，Vue體現在大量Watcher帶來的效能損耗上面，React則體現在Diff演算法的計算時間中（虛擬Dom計算時間過長會導致卡頓）
不同的解決方式
