vue与react中监听的简单对比

一、核心概念对比

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. 响应式原理差异

维度	Vue	React
‌数据跟踪‌	自动依赖收集	手动声明依赖
‌更新触发‌	精确到属性级别	组件级别重新渲染
‌实现方式‌	编译时转换+运行时劫持	运行时虚拟DOM diff

2. 性能优化对比

优化策略	Vue实现方式	React实现方式
‌计算缓存‌	自动缓存的computed	需手动useMemo
‌函数缓存‌	方法自动绑定	需手动useCallback
‌列表渲染‌	v-for自带key优化	需手动指定key
‌深度监听‌	内置deep:true支持	需手动拆解对象属性

3. 开发体验对比

开发场景	Vue优势	React优势
‌快速原型‌	更少的样板代码	更灵活的组件组合
‌复杂状态‌	自动化的响应式更新	更精确的状态控制
‌跨平台‌	更好的uni-app整合	更丰富的React Native生态
‌TypeScript‌	需要额外类型定义	一流的TS支持

四、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]);
}