1. 相同点

• 都有组件化思想
• 都支持服务器端渲染
• 都有Virtual DOM（虚拟dom）
• 数据驱动视图
• 都有支持native的方案：Vue的weex、React的React native
• 都有自己的构建工具：Vue的vue-cli、React的Create React App

2. 基础组件定义：

Vue2 (options API)​

export default {
  name: 'MyComponent',
  props: ['title'],
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

Vue3 (conponents API)​

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  }
}

​React (class组件)​

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }
  
  increment = () => {
    this.setState({ count: this.state.count + 1 })
  }
}

​React (函数组件)​

function MyComponent() {
  const [count, setCount] = useState(0)
  const increment = () => setCount(c => c + 1)
  return /* JSX */
}

3. 生命周期：

Vue 生命周期钩子	React 类组件生命周期	React Hooks 等效实现	触发时机说明
beforeCreate	-	-	实例初始化前，data/methods 不可用
created	-	useState 初始化	实例创建完成，可访问 data/methods
beforeMount	componentWillMount	-	模板编译完成，DOM 挂载前
mounted	componentDidMount	useEffect(() => {}, [])	DOM 挂载完成
beforeUpdate	componentWillUpdate	-	数据变化后，DOM 更新前
updated	componentDidUpdate	useEffect(() => {})	DOM 更新完成后
beforeUnmount (Vue3)	componentWillUnmount	useEffect(() => { return cleanup })	实例销毁前
unmounted (Vue3)	-	cleanup 函数执行	实例已销毁
activated	-	-	keep-alive 组件激活时
deactivated	-	-	keep-alive 组件停用时

4. 计算属性(computed) vs useMemo：

Vue (computed)

// 选项式
computed: {
  doubled() {
    return this.count * 2
  }
}

// 组合式
const doubled = computed(() => count.value * 2)

React (useMemo)

const doubled = useMemo(() => count * 2, [count])

5. 监听(watch) vs useEffect：

Vue (watch)

// vue2
export default {
  data() {
    return {
      count: 0,
      user: { name: 'Alice', age: 25 }
    }
  },
  watch: {
    // 基本用法
    count(newVal, oldVal) {
      console.log(`count changed: ${oldVal} -> ${newVal}`)
    }
  }
}

// vue3
// 组合式 API
import { ref, watch, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice', age: 25 })

    // 监听 ref
    watch(count, (newVal, oldVal) => {
      console.log(`count changed: ${oldVal} -> ${newVal}`)
    }, { immediate: true })

    // 监听 reactive 对象（自动深度监听）
    watch(
      () => ({ ...user }), // 解构避免直接监听 reactive
      (newVal) => {
        console.log('user changed:', newVal)
      }
    )

    // 监听特定属性
    watch(
      () => user.name,
      (newVal) => {
        console.log('name changed:', newVal)
      }
    )

    // 同时监听多个值
    watch([count, () => user.name], ([newCount, newName]) => {
      console.log(`Multiple: count=${newCount}, name=${newName}`)
    })

    return { count, user }
  }
}

React (useEffect)

// 最常用方式
import { useState, useEffect } from 'react';

function Component() {
  const [count, setCount] = useState(0);
  const [double, setDouble] = useState(0);

  // 监听 count 变化（等效 Vue 的 watch）
  useEffect(() => {
    setDouble(count * 2);
    console.log('count changed:', count);
  }, [count]); // 依赖数组，只有 count 变化时才会重新执行
  return <button onClick={() => setCount(c => c + 1)}>{count} x 2 = {double}</button>;
}

// 使用第三方库 ahooks
import { useWatch } from 'ahooks';
useWatch(count, (newVal, oldVal) => {
  console.log('count changed', oldVal, '->', newVal);
});

6. Vue和React的区别：

相同点：使用 Virtual DOM

都能使用服务端渲染 React(Next.js)、 Vue(Nuxt.js)

中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数

Diff原理：
Vue2 是全量 Diff，采用的思想是同级比较、深度优先、双端遍历。
Vue3 是静态标记 + 非全量 Diff
React 是 同级比较、深度优先、组件类型一致性、key 属性优化

vue采用双指针，从两头向中间进行遍历
react 采用单指针从左向右进行遍历

7.Vue 和 React 全局变量方案对比

React 的全局变量方案​

(1) Context API（官方推荐）

// 1. 创建 Context
const UserContext = React.createContext();

// 2. 提供全局变量（在顶层组件）
function App() {
  const [user, setUser] = React.useState({ name: "John", age: 25 });
  
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <ChildComponent />
    </UserContext.Provider>
  );
}

// 3. 在子组件中使用
function ChildComponent() {
  const { user, setUser } = React.useContext(UserContext);
  
  return <div>Hello, {user.name}!</div>;
}

(2) Redux（适用于复杂状态管理）​

Vue 的全局变量方案​

(1) Provide/Inject（适用于简单全局变量）​

// App.vue
<script>
import { provide, ref } from "vue";

export default {
  setup() {
    const user = ref({ name: "John" });
    provide("user", user); // 提供全局变量
  },
};
</script>

// ChildComponent.vue 
<script>
import { inject } from "vue";

export default {
  setup() {
    const user = inject("user"); // 获取全局变量
    return { user };
  },
};
</script>

(2) Vuex（官方状态管理库）