Vue.js中的计算属性 computed 与监听属性 watch深入探索

🎓 深入理解计算属性 computed 与监听属性 watch

🌟 计算属性 (computed)

在Vue3中，计算属性扮演着数据加工站的角色。假设我们在组件中有多个基础数据属性，当需要基于这些属性值进行进一步计算并生成新的、依赖于原始属性的值时，这就需要用到计算属性。

// 在Vue3的setup函数中
import { ref, computed } from 'vue';

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

// 创建一个计算属性fullName
const fullName = computed(() => {
  return `firstName：${firstName.value} lastName：${lastName.value}`;
});

// 现在，fullName会根据firstName和lastName的变化自动更新！

每当firstName或lastName的值发生变化时，Vue会自动重新计算fullName的值，无需手动干预。这对于优化性能和保持代码简洁非常有用。

🔍 监听属性 (watch)

而监听属性 watch更像是个敏锐的观察者，它能监听特定的数据变化，并在变化发生时执行相应的回调函数。

import { watch } from 'vue';

// 监听firstName属性的变化
watch(
  () => firstName.value,
  (newName, oldName) => {
    console.log(`First name changed from "${oldName}" to "${newName}"`);
    // 可以在此处执行任何需要的操作，比如调用API更新用户信息等
  },
);

// 甚至可以监听对象属性的变化，并深度追踪
watch(
  () => user.info.address,
  (newAddress, oldAddress) => {
    console.log(`Address changed from "${oldAddress}" to "${newAddress}"`);
  },
  { deep: true },
);

🤝 计算属性与监听属性的差异及使用场景

• 计算属性主要用于简化模板内的表达式，避免在模板内做过多的逻辑处理，其结果会被缓存，只有依赖项改变时才会重新计算。

• 监听属性则是在数据变化时触发副作用操作，例如异步请求、修改其他数据、更新DOM等。它不会缓存结果，每次触发都会执行监听回调。

🧐 深入剖析Vue3中的计算属性（computed）

📌 缓存与懒计算机制

计算属性的核心特性是它的缓存机制。这意味着只要依赖的响应式状态没有变化，计算属性就不会重新执行计算逻辑。这极大地提升了性能，尤其当计算过程复杂或者耗时时。

例如，在大型列表渲染中，每个item都可能依赖于一个计算属性，如果该属性被高效地缓存了，那么即使列表频繁渲染，也不会重复执行不必要的计算。

const list = ref([/* 大量数据 */]);
const filteredList = computed(() => {
  // 过滤、排序或其他复杂计算...
  return complexFilterAndSort(list.value);
});

在上面的例子中，只要list的值未变，filteredList就会直接返回之前计算好的结果，而不是每次都执行complexFilterAndSort函数。

📊 多重依赖与依赖追踪

计算属性能够跟踪多个依赖项。当你在一个计算属性的getter函数中访问其他响应式状态时，Vue会自动追踪这些依赖关系。一旦任何一个依赖的状态发生变化，Vue将会重新计算该计算属性。

const age = ref(30);
const yearsToRetirement = ref(35);
const retirementAge = computed(() => {
  return age.value + yearsToRetirement.value;
});

在上述示例中，retirementAge依赖于age和yearsToRetirement两个变量，当任意一个变量改变时，retirementAge会相应更新。

🔎 深入探索Vue3中的监听属性（Watch）

🕵️‍♂️ 动态监听与手动移除

监听属性允许我们动态地监听任何响应式数据或表达式的变更，并在变更时执行自定义的回调函数。通过watch函数，我们可以设置监听目标、回调函数以及配置选项。

除了基本的监听外，还可以指定immediate选项让监听器在创建后立即执行一次，以及通过flush选项控制回调函数何时执行（默认是在微任务队列中执行）。

此外，返回一个清理函数可实现对监听器的手动移除，避免在组件生命周期结束后仍持续监听不再需要的属性。

let unwatch = watch(
  () => someValue,
  (newValue, oldValue) => {
    console.log('Some value has changed:', newValue, oldValue);
  },
  { immediate: true }
);

// 当不再需要监听时
unwatch();

💬 监听对象的深层变化与深度比较

在监听对象或数组时，可以启用deep选项来检测内部属性的变化。这样，即便对象内部深层次的属性发生了变化，也会触发监听回调。

const user = reactive({ info: { address: '123 Main St' } });
let unwatchDeep = watch(
  () => user.info,
  (newInfo, oldInfo) => {
    console.log('User info has changed');
  },
  { deep: true }
);

📚 总结

计算属性 computed：

• 核心特性: 提供基于其他响应式状态的衍生值，具备缓存机制，只在依赖状态变化时重新计算，有效提升性能。
• 应用场景: 需要在模板中展示经过计算得出的值，如过滤、格式化、汇总等。
• 特点: 自动追踪依赖关系，支持多依赖，减少模板中的复杂逻辑。

监听属性 watch：

• 功能: 监听响应式数据或表达式的变更，并在变更时执行自定义回调函数。
• 应用场景: 数据变化后需要执行特定操作，如触发异步请求、更新DOM、执行业务逻辑等。
• 特性: 支持动态监听、立即执行（immediate）、深层监听（deep）、手动移除监听（返回清理函数）等高级功能。

总结而言，计算属性 computed 和监听属性 watch在Vue3中各司其职，协同作用于数据驱动的应用开发中。计算属性专注于提供基于已有状态的衍生状态，强调性能优化和模板简洁性；而监听属性则致力于在数据变化时执行各种定制化的副作用操作，为开发者提供了更为灵活的数据监控和响应机制。

🔥 面试常问

在Vue3中，何时应该使用计算属性（Computed），何时使用监听属性（Watch）？

• 使用计算属性的情况：

  • 当你需要根据组件中的某些响应式状态衍生出一个新的值，并在模板中展示这个新值时，最适合使用计算属性。由于计算属性自带缓存机制，所以它在依赖项未改变的情况下不会重复计算，有利于提高性能。
  • 当你的计算逻辑相对简单，不需要在数据变化时执行额外的操作，仅仅是用来展示或传递给其他组件时，也应当优先考虑计算属性。

• 使用监听属性的情况：

  • 当你需要在某个数据变化时执行一段复杂的业务逻辑，比如发送网络请求、更新数据库、修改其他无关的响应式状态等副作用操作时，应使用监听属性。
  • 如果要监听的对象属性可能会有深层次的变化，可以通过设置deep: true来深度监听。
  • 在一些特定场景下，如需要在初始化时立刻执行监听回调，或需要手动移除监听器，这时也需要使用监听属性。

能否简述Vue3中计算属性与监听属性的区别？

• 计算属性：

  • 主要用于声明式地表示数据依赖关系，并计算出新的衍生值。
  • 具有缓存机制，只有依赖的响应式状态发生变化时才重新计算。
  • 通常用于优化模板的复用性和简洁性，提高渲染效率。

• 监听属性：

  • 主要是针对数据变化做出反应，执行特定的副作用操作。
  • 不具备缓存机制，每次监听到变化都会执行回调函数。
  • 更侧重于数据变化后的处理逻辑，而非仅仅为了展示目的。