根据调试工具看Vue源码之computed（一）

aisuhua 发布于2019-08-26 13:34 / 1125人阅读

摘要：官方定义类型详细计算属性将被混入到实例中。所有和的上下文自动地绑定为实例计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖比如非响应式属性在该实例范畴之外，则计算属性是不会被更新的。

官方定义

类型：{ [key: string]: Function | { get: Function, set: Function } }

详细：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例...

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

上面这几段话其实可以归纳为以下几点：

computed是计算属性，会被混入到Vue实例中

computed的结果会被缓存，除非依赖的响应式属性变化才会重新计算

如何初始化computed？

同以往一样，先新建一个Vue项目，同时加入以下代码：

export default {
  name: "test",
  data () {
    return {
      app: 666
    }
  },
  created () {
    console.log("app proxy -->", this.appProxy)
  },
  computed () {
    appProxy () {
      debugger
      return this.app
    }
  }
}

F12打开调试界面，刷新后断点停在了debugger的位置，同时可以看到右边的调用栈：

appProxy

get

evaluate

computedGetter

created

...

瞥到computedGetter之后，点进去，可以看到：

function createComputedGetter (key) {
  return function computedGetter () {
    var watcher = this._computedWatchers && this._computedWatchers[key];
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate();
      }
      if (Dep.target) {
        watcher.depend();
      }
      return watcher.value
    }
  }
}

看到这里不禁一脸懵逼

超融合服务器私有云看动画学算法之:hashtable vue源码 vue webrtc 源码源码中文说明之

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109065.html

根据调试工具看Vue源码之computed（二）

摘要：回顾上回提到，计算属性的缓存与这个类的属性有关，那么这次我们接着来看下，属性到底取决于什么情况来变化，从而对进行缓存。回顾上回提到，computed————计算属性的缓存与Watcher这个类的dirty属性有关，那么这次我们接着来看下，dirty属性到底取决于什么情况来变化，从而对computed进行缓存。依赖收集切入正题之前，我们先来看一个问题：如果一个computed的结...

U2FsdGVkX1x 2019-08-23 15:58 评论0 收藏0
根据调试工具看Vue源码之生命周期（一）

摘要：由于工作中经常使用调试工具来定位问题，觉着这东西真的挺好用。突然有一天受到启发，想着我学习源码是否也可以通过调试工具呢因此，诞生了这篇文章来记录我的一些学习成果，后续应该会写成一个系列。由于工作中经常使用chrome调试工具来定位问题，觉着这东西真的挺好用。突然有一天受到启发，想着：我学习源码是否也可以通过调试工具呢？因此，诞生了这篇文章来记录我的一些学习成果，后续应该会写成一个...

My_Oh_My 2019-08-23 15:07 评论0 收藏0
根据调试工具看Vue源码之组件通信（一）

摘要：根据调试工具看源码之组件通信一根据调试工具看源码之组件通信一在平时的业务开发中，相信在座的各位没少用过组件通信。看完本文可以帮助你了解组件的通信方式及原理，从而进一步加深对的理解，远离工程师的行列。根据调试工具看Vue源码之组件通信（一）## 根据调试工具看Vue源码之组件通信（一）在平时的业务开发中，相信在座的各位没少用过组件通信。然而，对于一些新手/业务熟手来说，不懂技术原理往...

付伦 2019-08-23 15:30 评论0 收藏0
根据调试工具看Vue源码之watch

摘要：实例将会在实例化时调用，遍历对象的每一个属性。我们期待的是断点停下后，调用栈中出现相关的函数，提供我们分析原理的依据。抱着上面的意图以及期待，我们新建一个项目，同时写入以下代码刷新页面后右边的调用栈显示如下官方定义类型：{ [key: string]: string | Function | Object | Array } 详细：一个对象，键是需要观察的表达式，值是对...

monw3c 2019-08-23 16:20 评论0 收藏0
根据调试工具看Vue源码之虚拟dom（二）

摘要：前言上回我们提到，在子组件存在的情况下，父组件在执行完钩子函数之后生成子组件的实例，子组件执行钩子函数，同时也检查是否也有子组件，有则重复父组件的步骤，否则子组件的元素渲染深入了解在上一篇文章中其实我们提到一个函数前言上回我们提到，在子组件存在的情况下，父组件在执行完created钩子函数之后生成子组件的实例，子组件执行created钩子函数，同时也检查是否也有子组件，有则重复父组...

zzir 2019-08-26 13:45 评论0 收藏0