一、核心概念对比

Vue监听机制

• ‌响应式核心‌：基于Object.defineProperty(Vue2)/Proxy(Vue3)的数据劫持

• ‌主要API‌：

  • data + watch侦听器
  • computed计算属性
  • $watch方法

• ‌设计哲学‌：声明式编程，自动依赖追踪

React监听机制

• ‌响应式核心‌：基于不可变数据和虚拟DOM diff

• ‌主要API‌：

  • useState + useEffect
  • useMemo/useCallback
  • 类组件的生命周期方法

• ‌设计哲学‌：函数式编程，显式控制

二、代码实现对比（含优化方案）

Vue实现示例

javascript
 代码解读
复制代码
export default {
  data() {
    return {
      count: 0,
      user: { 
        name: 'John',
        profile: { age: 30 }
      }
    }
  },
  watch: {
    // 基础监听
    count(newVal, oldVal) {
      console.log(`Count变化: ${oldVal}→${newVal}`);
    },
    // 深度监听优化
    user: {
      handler(val) { /* 处理逻辑 */ },
      deep: true,
      immediate: false  // 避免初始化执行
    },
    // 精确监听嵌套属性
    'user.profile.age': function(newAge) {
      console.log('年龄变化:', newAge);
    }
  },
  computed: {
    // 带缓存的计算属性
    userInfo() {
      return `${this.user.name}-${this.user.profile.age}`;
    }
  }
}

React实现示例

javascript
 代码解读
复制代码
import { useState, useEffect, useMemo, useCallback } from 'react';

function UserComponent() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ 
    name: 'John',
    profile: { age: 30 }
  });

  // 基础监听（类似watch）
  useEffect(() => {
    console.log('count变化:', count);
  }, [count]);  // 明确依赖

  // 深度监听优化方案
  useEffect(() => {
    console.log('user变化:', user);
  }, [user.name, user.profile.age]);  // 精确指定依赖

  // 计算属性优化（类似computed）
  const userInfo = useMemo(() => {
    return `${user.name}-${user.profile.age}`;
  }, [user.name, user.profile.age]);

  // 事件处理优化
  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <div>
      <p>{userInfo}p>
      <button onClick={handleClick}>增加button>
    div>
  );
}

三、深度对比分析

1. 响应式原理差异

2. 性能优化对比

3. 开发体验对比

四、Uniapp开发中的监听实践

1. Vue语法下的特殊处理

javascript
 代码解读
复制代码
// 在uni-app中需要特别注意的watch用法
export default {
  watch: {
    // 监听全局变量变化
    '$store.state.token'(newVal) {
      uni.setStorageSync('token', newVal);
    },
    // 处理平台差异
    someValue: {
      handler(val) {
        // #ifdef H5
        console.log('H5特有处理');
        // #endif
      }
    }
  }
}

2. React语法下的注意事项

scss
 代码解读
复制代码
function UniAppComponent() {
  const [sysInfo, setSysInfo] = useState({});
  
  useEffect(() => {
    // 获取系统信息
    uni.getSystemInfo({
      success: res => setSysInfo(res)
    });
  }, []);

  // 处理平台特定逻辑
  useEffect(() => {
    // #ifdef MP-WEIXIN
    console.log('微信小程序特有逻辑');
    // #endif
  }, [sysInfo]);
}