vue.js 中 computed 原理的深度探索

2023-12-06 16:52:58

深入剖析 Vue.js 中的 computed：原理、区别与实战技巧

对于 Vue.js 开发者而言，computed 和 watch 是两个必不可少的特性。理解它们之间的区别并掌握 computed 的实现原理至关重要。本文将深入浅出地为你讲解 computed，从原理到实践，助你充分掌握这一特性。

computed 的原理

computed 是 Vue.js 中一个强大的工具，它允许我们定义计算属性。这些属性的值基于其他属性，并且会在这些依赖属性发生变化时自动更新。

computed 的原理十分简洁，它利用了 JavaScript 的 getter 和 setter 函数。当你定义一个 computed 属性时，Vue.js 会自动为它生成这两个函数。当访问该属性时，Vue.js 会调用 getter 函数计算属性值并将其返回给你。如果依赖属性发生变化，Vue.js 将调用 setter 函数更新 computed 属性的值。

示例：

// getter 函数
getFullName() {
  return this.firstName + ' ' + this.lastName;
}

// setter 函数
setFullName(newValue) {
  // 这里什么都不做，因为 fullName 是一个计算属性，
  // 我们不能直接设置它的值。
}

computed 与 watch 的区别

computed 和 watch 都是响应数据变化的特性，但它们之间有几个关键区别：

性质： computed 是计算属性，而 watch 是侦听器。computed 属性的值是由其他属性计算而来的，而 watch 则监听某个属性的变化并执行函数。
执行时机： computed 属性仅在被访问时才计算其值，而 watch 会在监听的属性发生变化时立即执行函数。
依赖关系： computed 属性可以依赖其他 computed 属性，而 watch 只能监听普通属性。

computed 的实战技巧

computed 在实际开发中用途广泛，以下是几个常见用法：

格式化数据： 将数据格式化为所需的格式，如将时间戳转换为日期字符串。
过滤数据： 从数据中提取特定子集，如从数组中过滤出奇数元素。
计算属性： 计算出所需数据，如计算商品的总价。
条件渲染： 根据条件控制组件的渲染，如根据用户身份决定是否显示某个组件。

示例：

// 计算商品总价
computeTotalPrice() {
  return this.quantity * this.unitPrice;
}

// 条件渲染：仅在用户登录时显示组件
computedShouldShowComponent() {
  return this.isLoggedIn;
}