🎓 深入理解计算属性 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中计算属性与监听属性的区别？
- 计算属性：
- 主要用于声明式地表示数据依赖关系，并计算出新的衍生值。
- 具有缓存机制，只有依赖的响应式状态发生变化时才重新计算。
- 通常用于优化模板的复用性和简洁性，提高渲染效率。
- 监听属性：
- 主要是针对数据变化做出反应，执行特定的副作用操作。
- 不具备缓存机制，每次监听到变化都会执行回调函数。
- 更侧重于数据变化后的处理逻辑，而非仅仅为了展示目的。
