Vue关于Compute源码的学习笔记（编写中）

一直都在网上查阅关于Compute源码分析的文章，但是看起来都挺费劲的。以下是我的一些学习笔记：

1、初始Vue时会通过initState方法，在代码中进行opts.computed字段的判断，从而进行initComputed方法对compute进行初始化。

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

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

}


function initState(vm) {    

    var opts = vm.$options;    

    if (opts.computed) { 

        initComputed(vm, opts.computed); 

    }

    .....

}

2、initComputed源码分析

function initComputed(vm, computed) {    

    var watchers = vm._computedWatchers = Object.create(null);    

    for (var key in computed) {        

        var userDef = computed[key];        

        // Vue代码实现时compute有两种定义方法，一种是直接定义function，一种是设置get和set
        // 判断是哪种，然后设置getter

        var getter = typeof userDef === 'function' ? userDef: userDef.get;      


        // 每个 computed 都创建一个 watcher

        // watcher 用来存储计算值，判断是否需要重新计算

        watchers[key] = 

        new Watcher(vm, getter, { 
            // lazy表示这个 watcher 需要缓存

            // 传入lazy作用是在watch中把计算结果缓存起来，而不是每次使用都要重新计算

             lazy: true 

        });        

        // 判断是否有重名的属性

        if (! (key in vm)) {
            defineComputed(vm, key, userDef);
        }
    }
}