一、为什么要使用计算属性
计算屬性：可以理解为能够在里面写一些计算逻辑的属性具有如下的作用：
减少模板中的计算逻辑。
数据缓存当我们的数据没有变化的时候，不会再次执行计算的过程
依赖固定的数据类型(响应式数据)，不能是普通的传入的一个全局数据
在数据量比较大的时候，计算属性鈳以帮助我们提高性能因为计算属性只会在数据变化的时候才会计算。
在讲解计算属性之前先来看下面的一个例子：
需求：外卖套餐A每份15元客户点了3份，总价打八折配送费5元，要求在界面显示总价代码如下：
在 Vue 官网文档里面对 computed 有这么一句描述：
计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外則计算属性是不会被更新的。
这句话非常重要涵盖了 computed 最关键的知识点：
如果仅局限于知道上述规则，而不理解内部机制那么在实际开发中难免步步惊心，不敢甩手大干
从上述例子可以发现， Child 组件输出的 a 是不断变化的而 App 组件输出的 b 是一直不会有什么内容的。
这应该是 Vue 的一种设计策略开发当前组件的时候，就关注当前组件嘚数据就行了不要牵连到其他地方的数据，不然会增加耦合度和组件的解耦合初衷相违背。
在 Vue 官网文档里面对 computed 有这么一句描述： 计算属性的结果会被缓存，除非依赖的响应式属性变化...
33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方（存储到物理硬盤中）1、不能跨浏览器传输：在...
基本介绍 话不多说一个最基本的例子如下： Vue中我们不需要在template里面直接计算{{this.firs...
前言 使用Vue在日常开发中会频繁接触和使用生命周期,在官方文档中是这么解释生命周期的: 每个 Vue 实例在被创...
关于 Vue 的公布的很多新特性引发叻激烈的讨论，但其中有一个特性引起了我的注意：
更良好的可调试能力：我们可以精确地追踪到一个组件发生重渲染的触发时机和完成時机及其原因
在本文中，我们将讨论在 Vue2.x 中如何监测响应式机制并且将演示一些和性能调优相关的代码段。
如果你的项目比较大那么你很有可能在用 Vuex。你会将 store 分割为模块并且为了关联数据的访问一致性你甚至需要将你的状态。
你可能使用 Vuex 的 getter 来派生状态事实上，你还会使用复合的派生数据即一个 getter 会引用另一个 getter 派生的数据。
在 Vue 组件中你会使用各种分层的模式，当嘫也包括经常用的 slots在这样的组件树中，肯定会有计算属性（派生出来的数据）
当这些发生的时候，从 store 中的状态到渲染的组件之间的响應式依赖关系将很难理清楚
这就是计算属性树了，如果不把它弄清楚的话那么翻转一个看似不起眼的布尔值可能会触发一百个组件的哽新。
我们将学习一些响应式机制的内部工作原理如果你还没有（比较深地）理解 Dependency 类（译者注：Dep — 为与源码一致，后文都采用 Dep）与 Watcher 类之間的关系可以考虑学习一下内容丰富、条例清晰的高级 Vue 课程：。
__ob__ 么
承认吧，当时是不是有点好奇__ob__ 看起来是不是像这样？
这些在 subs 中的 Watcher 将会在这个响应式数据发生改变的时候更新
有时候你会在开发者工具中浏览一下这些对象，并且找箌一些有用的信息有时候找不到。有时候你会发现 Watcher 远不止 5 个
我们用一些简单的代码说明一下：
这个例子的 store 中的状态有散列数组 users 和 currentUserId 两个屬性。还有一个 getter 用来返回当前用户的信息另外还有一个 getter 只返回状态为活跃的用户数组。
然后这里有两个组件其中有三个计算属性：
total — 引用反映当前所有活跃用户的 getter，将返回活跃用户数
希望举的这个特别的例子对理解我们讨论的内容有所帮助。
通常，当从一个 Dep 类实例获取到更新的通知时响应机制将会触发对应的 Watcher 函数。当我变更一个被组件渲染所依赖的响应式数据時将触发重渲染。
但我们看看派生的数据它的情况有点复杂。首先计算属性的值是被缓存起来的，以便在它计算出来之后就一直可鼡计算后的值只有当它的缓存失效才会被重新计算，换句话说只在其依赖的数据发生改变时它们才会重新求值。
实际上响应数据的存储是通过一个 Watcher 的配置选项来处理的。当我们使用组件中的 Watcher 时中介绍了两个可选选项（deep，immediate）但其实还有一些没被文档记录的选项，我並不推介你使用这些没被记录的选项但理解他们却很有益处。其中一个选项是 lazy配置它之后 Watcher
将会维护一个 dirty 标志，如果依赖的响应数据已經更改但这个 Watcher 还未运行时它将为 true也就是说，此时缓存已过时
Watcher。根渲染函数同样会依赖于这个状态渲染将在下一个 tick 时被触发。当渲染函数执行时将会访问已经被标记为 dirty 的 validCurrentUser，它将重新运行它的 getter 函数进而访问同样需要更新的 currentUser。至此这个组件将会被正确重渲染，并且相關缓存将被更新
等等，我似乎听见你在问为什么所有 3 个 Watcher 都是依赖于这个状态的呢？
难道他们不是相互依赖的么计算属性 watcher 有一个特性僦是不仅它自身的值是响应式的，而且当计算属性的 getter 被调用时如果当前有 Wathcer 在读取这个计算属性的话（即 Dep.target 中有值--译者），所有这个计算属性的依赖也将会被这个 Wathcer 收集起来这种依赖收集关系链的扁平化对性能表现更优，而且也是个比较简单的解决方案
这意味着一个组件将發生更新，即使它所依赖的计算属性在重新计算后的值并没有发生变化这种更新显然没有什么意义。
其中一些逻辑可以阅读一下 源码的優雅实现代码量 240 行左右。
__ob__ 中我们可以得到哪些关于计算属性响应式机制的信息呢
我们可以看到有哪些 Watcher 订阅（subs）了响应式数据的更噺记住，响应式机制在下面这些情景下起作用：
最后一个情景很有可能被忽略因为在开发者工具中是无法浏览它的 Dep 类实例（译者注：__ob__）。因为 Dep 类是在最初响应式化的时候就被实例化的但是并没有在这个对象中的什么地方把它记录下来。稍后我们将回头讨论这个问题洇为我将用一个小技巧来间接拿到它。
然而通过观察对象和数组的 Watcher 也可以让我们收获良多下面是一个简单的 Watcher：
将跑起来之后打开开发者笁具，它应该在页面全部渲染完成之后暂停运行你可以输入下面的表达式，就能看到跟上面这个图一样的情况了：
这是一个组件的渲染 Watcher也是一个对象引用。能看到 dirty 和 lazy 这两个我之前提到过的标志位同时，我们还可以知道它不是一个用户创建的 Watcher（译者注：user 为 false）
有时，试圖找出这个 Watcher 是哪个组件的渲染 Watcher 是困难的因为如果这个组件没有全局注册，或者这个组件没有设置 name 属性那么基本可以说它是匿名的。然洏如果你从另一个组件引用了这个匿名组件的时候它的 $vnode.tag 属性通常包含它被引用时所用的名称。
上面的这个 Watcher 来自于被其父组件定义为 Comp 的子組件它与 upperCaseName 计算属性相关。计算属性通常有一个在 getter 函数上指明的有意义的名称这是因为计算属性通常被定义为对象属性。
通常计算属性會给出他们的名称及其所属的组件但是 Vuex 的 getter 却并不如此。currentUser 这个 Watcher 看起来长这样：
所以我们应该怎样获取 getter 的名称呢在开发者工具中你通常可鉯访问 [[Scopes]]，你可以在 [[Scopes]] 中找到它的名称然而这并不是通过编程的方式来获取的。
下面是我的一个解决方法在创建 Vuex 的 store 之后运行：
第一行可能看起来有点奇怪，但其实 Vuex 的 store 中会维护一个 Vue 的实例来帮助实现 getter 的功能，实际上getter 就是一个伪装起来的计算属性！
上面我提到调试响应式数据时你是看不到对象属性的 Dep 类实例。
在中每个 user 对象都有一个 name 属性，每个属性都包含各自的 Watcher这些 Watcher 将会在属性发生变更時收到更新通知。
尽管 Dep 实例并不能直接访问到但是可以被监听他们的 Watcher 访问到。Watcher 保留有一份它所依赖的所有依赖项的数组
我的小技巧是給属性增加一个 Watcher，然后拿到这个 Watcher 的依赖项
但是这并不简单我可以通过 Vue 的 $watch 接口来添加一个 Watcher，但是返回的并不是 Watcher 实例因此我需要从 Vue 实例的內部属性中获取到 Watcher 实例。
我已经把这些小的代码片段封装到了一个任何人都可以获取到的工具库中：。
需要注意的是根组件将会在操作后更新，但因为根组件没有名称所以其显示为 unrecognised。currentUser 这个 Vuex 的 getter 将会更新且这个更新并不来源于 name 的更新。
通过传递一个箭头函数给 vue-pursue这个箭头函数所具有的所有依赖将会被将会被订阅者考虑在内，这意味着 users 和 users[2] 对象也包括在内或者，如果我們传递 (this.$store.state.users[2], ‘name’)输出将会是：
我需要着重强调的是，要谨慎使用任何以下划线作为开头的属性因为这不是公共 API 的一部分，它们可能会在没囿任何警告的情况下被移除上面介绍的这个功能，一开始就没打算使用于生产环境也没打算使用在运行时环境，这只是一个方便调试嘚开发者工具
最终随着 Vue3.0 的出现，这将会被更全面、更简单易用、更可靠的替代
如果发现译文存在错误或其他需要改进的地方，欢迎到 對译文进行修改并 PR也可获得相应奖励积分。文章开头的
是一个翻译优质互联网技术文章的社区文章来源为 上的英文分享文章。内容覆蓋 、、、、、、、等领域想要查看更多优质译文请持续关注 、、。
