【Vue原理】Computed - 源码版

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】Computed - 源码版

今天要记录 computed 的源码，有时候想，理解不就好了吗，为什么要记录一遍源码。现在终于想通了

过了一段时间之后，你就会忘记你的所谓理解是怎么来的

“哎，为什么会这么做，关系为什么是这样，我c…”

于是，记录并简化源码，就有助我们迅速找到根源，解决我们的疑惑，还能加强我们的理解

好吧

嗯，这篇文章很长很详细哦，做好阅读的准备，唔该

我们重点说明，几个问题的源码实现

1、computed 的 月老身份的来源

2、computed 怎么计算

3、computed 的缓存是怎么做的

4、computed 什么时候初始化

5、computed 是怎么可以直接使用实例访问到的

问题不会按顺序解析，因为这些问题会互相关联，在探索源码的过程中，你自然会得到答案

首先，从这个问题开始我们今天的探索之旅，请看源码

---

什么时候初始化

function Vue(){
    ... 其他处理
    initState(this)

    ...解析模板，生成DOM 插入页面

}



function initState(vm) {    

    var opts = vm.$options;    

    if (opts.computed) { 

        initComputed(vm, opts.computed); 

    }

    .....

}

没错，当你调用 Vue 创建实例过程中，会去处理各种选项，其中包括处理 computed

处理 computed 的方法是 initComputed，下面就呈上 源码

---

initComputed

function initComputed(vm, computed) {    

    var watchers = vm._computedWatchers = 

            Object.create(null);    

    for (var key in computed) {        

        var userDef = computed[key];        

        var getter = 

            typeof userDef === 'function' ?