Vue3如何使用watch和computed属性实现数据的变更监听和计算

'# Vue3如何使用watch和computed属性实现数据的变更监听和计算

一、背景与问题

在Vue3的响应式系统中，watch和computed是处理数据变更的核心工具。理解它们的原理和适用场景，是构建高效、可维护的Vue应用的关键。

1.1 问题场景

在开发过程中，我们常遇到以下问题：

需要根据数据变化动态计算衍生值
需要响应数据变化执行副作用操作
需要避免重复计算和不必要的DOM更新

1.2 传统方案的局限

在Vue2中，开发者常使用watch和computed，但Vue3的响应式系统基于Proxy实现，其底层原理与Vue2的Object.defineProperty有本质区别。理解这些差异是掌握Vue3响应式特性的关键。

二、基本原理

2.1 响应式系统的底层实现

Vue3通过createReactivity函数创建响应式系统，核心是Proxy和Reflect API：

// 简化版响应式系统
function createReactivity(target) {
  return new Proxy(target, {
    get: (obj, key) => {
      // 依赖收集逻辑
      return Reflect.get(obj, key);
    },
    set: (obj, key, value) => {
      // 触发更新逻辑
      return Reflect.set(obj, key, value);
    }
  });
}

当访问属性时，会触发依赖收集；当属性变化时，会触发更新。

2.2 computed的实现原理

computed本质是创建了一个响应式计算属性：

function computed(fn) {
  const result = ref();
  const effect = createEffect(() => {
    result.value = fn();
  });
  return result;
}

通过createEffect创建的副作用函数会在依赖项变化时自动更新。

2.3 watch的实现原理

watch本质是创建一个副作用函数并附加到响应式依赖：

function watch(source, callback) {
  const effect = createEffect(() => {
    const value = source();
    callback(value);
  });
  return effect;
}

通过source()获取当前值，当依赖项变化时触发回调。

三、环境准备

3.1 项目创建

使用Vite创建Vue3项目：

npm create vue@latest

3.2 开发环境

确保已安装以下依赖：

npm install vue@next

四、核心实现

4.1 computed的使用场景

适用于需要计算衍生值且不直接修改数据的情况。

示例1：计算属性

<template>
  <div>
    原始价格: {{ price }} 元
    折后价格: {{ discountedPrice }} 元
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const price = ref(100);
const discountRate = ref(0.8);

const discountedPrice = computed(() => {
  return price.value * discountRate.value;
});
</script>

关键代码解释：

computed创建一个响应式计算属性
当price或discountRate变化时，discountedPrice会自动更新
计算函数内部的变量访问会触发依赖收集

4.2 watch的使用场景

适用于需要执行副作用操作的情况，如API调用、数据持久化等。

示例2：监听数据变化

<template>
  <div>
    输入内容: <input v-model="inputValue" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const inputValue = ref('');

watch(
  () => inputValue.value,
  (newVal, oldVal) => {
    console.log(`输入内容从 ${oldVal} 变为 ${newVal}`);
  }
);
</script>

关键代码解释：

watch监听inputValue的变化
回调函数接收新旧值
适用于需要处理异步操作的场景

4.3 watchEffect的使用场景

适用于监听多个响应式依赖的场景。

示例3：自动计算

<template>
  <div>
    姓名: <input v-model="firstName" />
    姓氏: <input v-model="lastName" />
    全名: {{ fullName }}
  </div>
</template>

<script setup>
import { ref, watchEffect, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

watchEffect(() => {
  console.log(`全名更新为: ${fullName.value}`);
});
</script>

关键代码解释：

watchEffect自动追踪所有响应式依赖
当firstName或lastName变化时触发回调
可用于自动执行副作用

五、完整案例

5.1 电商商品信息展示系统

5.1.1 功能需求

显示商品价格和折扣信息
实时计算折扣后价格
监听用户输入修改折扣率
监听价格变化触发库存更新

5.1.2 项目结构

src/
├── components/
│   └── ProductCard.vue
└── App.vue

5.1.3 实现代码

App.vue

<template>
  <div class="container">
    <ProductCard 
      :price="price" 
      :discount-rate="discountRate" 
      @update:discount-rate="handleDiscountChange" 
    />
    <div class="info">
      当前价格: {{ price }} 元
      当前折扣率: {{ discountRate }} 折
      折后价格: {{ discountedPrice }} 元
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import ProductCard from './components/ProductCard.vue';

const price = ref(100);
const discountRate = ref(0.8);

const discountedPrice = computed(() => {
  return price.value * discountRate.value;
});

const handleDiscountChange = (newRate) => {
  discountRate.value = newRate;
};
</script>

ProductCard.vue

<template>
  <div class="product-card">
    <div class="input-group">
      <label>价格 (元): </label>
      <input 
        type="number" 
        v-model="price" 
        @input="handlePriceChange"
      />
    </div>
    <div class="input-group">
      <label>折扣率 (0-1): </label>
      <input 
        type="number" 
        v-model="discountRate" 
        @input="handleDiscountChange"
      />
    </div>
    <div class="action">
      <button @click="applyDiscount">应用折扣</button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const price = ref(100);
const discountRate = ref(0.8);

const emit = defineEmits(['update:discount-rate']);

const handlePriceChange = (event) => {
  price.value = parseFloat(event.target.value) || 100;
};

const handleDiscountChange = (event) => {
  discountRate.value = parseFloat(event.target.value) || 0.8;
};

const applyDiscount = () => {
  emit('update:discount-rate', discountRate.value);
};

watch(() => discountRate.value, (newRate) => {
  console.log(`折扣率更新为 ${newRate}`);
});
</script>

六、源码解析

6.1 computed的实现原理

function computed(fn) {
  const result = ref();
  const effect = createEffect(() => {
    result.value = fn();
  });
  return result;
}

创建一个响应式计算属性
通过createEffect创建副作用函数
当依赖项变化时自动更新

6.2 watch的实现原理

function watch(source, callback) {
  const effect = createEffect(() => {
    const value = source();
    callback(value);
  });
  return effect;
}

创建一个副作用函数并附加到响应式依赖
通过source()获取当前值
当依赖项变化时触发回调

七、进阶使用

7.1 复杂依赖管理

在处理多个响应式依赖时，可以使用watchEffect：

watchEffect(() => {
  console.log(`价格: ${price.value}, 折扣率: ${discountRate.value}`);
});

7.2 深度监听

使用deep选项进行深度监听：

watch(
  () => product,
  (newVal, oldVal) => {
    console.log('product changed', newVal);
  },
  { deep: true }
);

7.3 立即执行

使用immediate选项立即执行回调：

watch(
  () => price.value,
  (newVal, oldVal) => {
    console.log(`价格从 ${oldVal} 变为 ${newVal}`);
  },
  { immediate: true }
);

八、性能与工程实践

8.1 性能优化

避免不必要的计算：在computed中避免复杂的计算逻辑
使用deep选项：对复杂对象使用深度监听
使用immediate选项：立即执行回调
合理使用watchEffect：自动追踪依赖项

8.2 异常处理

watch(
  () => price.value,
  (newVal, oldVal) => {
    try {
      // 可能抛出异常的计算逻辑
    } catch (error) {
      console.error('计算异常:', error);
    }
  }
);

8.3 安全考量

防止XSS攻击：在模板中使用v-html时要确保内容安全
数据校验：在watch回调中进行输入校验
避免无限循环：在computed中避免修改依赖项

九、常见问题与踩坑

9.1 常见错误

错误示例：
```
watch(price, (newVal) => {
  price.value = newVal * 0.8; // 会导致无限循环
});
```
问题：直接修改依赖项会导致无限循环
解决：通过ref或reactive修改数据
错误示例：
```
computed(() => {
  return someNonReactiveData; // 非响应式数据
});
```
问题：计算属性依赖非响应式数据
解决：确保所有依赖项都是响应式的

错误示例：

watch(
  () => price.value,
  (newVal) => {
 fetch('/api/update', { price: newVal }); // 未处理错误
  }
);

问题：未处理网络错误
解决：添加错误处理逻辑

9.2 常见问题

问题	解决方案
计算属性未更新	检查依赖项是否为响应式
watch未触发	确保依赖项是响应式对象
性能问题	使用`deep`选项和`immediate`选项
无限循环	避免直接修改依赖项

十、最佳实践

10.1 推荐方案

使用computed：当需要计算衍生值时
使用watch：当需要执行副作用时
使用watchEffect：当需要自动追踪多个依赖项时

10.2 使用建议

在computed中避免副作用操作
在watch中处理异步操作时要添加错误处理
对复杂对象使用deep选项
使用immediate选项立即执行回调

10.3 避免使用的场景

当需要频繁触发更新时使用watch而不是computed
在computed中进行复杂的计算逻辑
在watch中进行大量的DOM操作

十一、总结

Vue3的watch和computed是处理响应式数据的核心工具，理解其工作原理和适用场景是构建高效应用的关键。通过合理使用这些特性，可以显著提升开发效率和应用性能。需要注意的是，要根据具体场景选择合适的工具，避免不必要的计算和副作用操作。在实际开发中，要特别注意性能优化和异常处理，确保应用的稳定性和可靠性。

一、背景与问题

1.1 问题场景

1.2 传统方案的局限

二、基本原理

2.1 响应式系统的底层实现

2.2 computed的实现原理

2.3 watch的实现原理

三、环境准备

3.1 项目创建

3.2 开发环境

四、核心实现

4.1 computed的使用场景

示例1：计算属性

4.2 watch的使用场景

示例2：监听数据变化

4.3 watchEffect的使用场景

示例3：自动计算

五、完整案例

5.1 电商商品信息展示系统

5.1.1 功能需求

5.1.2 项目结构

5.1.3 实现代码

六、源码解析

6.1 computed的实现原理

6.2 watch的实现原理

七、进阶使用

7.1 复杂依赖管理

7.2 深度监听

7.3 立即执行

八、性能与工程实践

8.1 性能优化

8.2 异常处理

8.3 安全考量

九、常见问题与踩坑

9.1 常见错误

9.2 常见问题

十、最佳实践

10.1 推荐方案

10.2 使用建议

10.3 避免使用的场景

十一、总结

评论已关闭

推荐阅读