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

简介: 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的变化自动更新!

每当firstNamelastName的值发生变化时,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依赖于ageyearsToRetirement两个变量,当任意一个变量改变时,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 监听属性 watchVue3中各司其职,协同作用于数据驱动的应用开发中。计算属性专注于提供基于已有状态的衍生状态,强调性能优化和模板简洁性;而监听属性则致力于在数据变化时执行各种定制化的副作用操作,为开发者提供了更为灵活的数据监控和响应机制


🔥 面试常问

在Vue3中,何时应该使用计算属性(Computed),何时使用监听属性(Watch)?

  • 使用计算属性的情况:
  • 当你需要根据组件中的某些响应式状态衍生出一个新的值,并在模板中展示这个新值时,最适合使用计算属性。由于计算属性自带缓存机制,所以它在依赖项未改变的情况下不会重复计算,有利于提高性能。
  • 当你的计算逻辑相对简单,不需要在数据变化时执行额外的操作,仅仅是用来展示或传递给其他组件时,也应当优先考虑计算属性。
  • 使用监听属性的情况:
  • 当你需要在某个数据变化时执行一段复杂的业务逻辑,比如发送网络请求、更新数据库、修改其他无关的响应式状态等副作用操作时,应使用监听属性。
  • 如果要监听的对象属性可能会有深层次的变化,可以通过设置deep: true来深度监听。
  • 在一些特定场景下,如需要在初始化时立刻执行监听回调,或需要手动移除监听器,这时也需要使用监听属性。

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

  • 计算属性
  • 主要用于声明式地表示数据依赖关系,并计算出新的衍生值。
  • 具有缓存机制,只有依赖的响应式状态发生变化时才重新计算。
  • 通常用于优化模板的复用性和简洁性,提高渲染效率。
  • 监听属性
  • 主要是针对数据变化做出反应,执行特定的副作用操作。
  • 不具备缓存机制,每次监听到变化都会执行回调函数。
  • 更侧重于数据变化后的处理逻辑,而非仅仅为了展示目的。
目录
相关文章
|
11天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
18 1
|
19天前
|
JavaScript
vue 监听 sessionStorage 中值的变化
vue 监听 sessionStorage 中值的变化
40 1
|
20天前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
15 1
|
11天前
|
JavaScript
【vue】 vue中判断路由变化 | 监听路有变化
【vue】 vue中判断路由变化 | 监听路有变化
11 0
|
17天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
14 0
|
17天前
|
JavaScript
js 精确计算(解决js四则运算精度缺失问题)
js 精确计算(解决js四则运算精度缺失问题)
18 0
|
18天前
|
JavaScript
vue 批量绑定属性(你可能没这样用过 v-bind)
vue 批量绑定属性(你可能没这样用过 v-bind)
17 0
|
19天前
|
JavaScript
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
15 0
|
19天前
|
缓存 JavaScript C++