• 7.1 数据初始化

    7.1 数据初始化

    回顾一下之前的内容,我们对Vue源码的分析是从初始化开始,初始化_init会执行一系列的过程,这个过程包括了配置选项的合并,数据的监测代理,最后才是实例的挂载。而在实例挂载前还有意忽略了一个重要的过程,数据的初始化(即initState(vm))。initState的过程,是对数据进行响应式设计的过程,过程会针对props,methods,data,computedwatch做数据的初始化处理,并将他们转换为响应式对象,接下来我们会逐步分析每一个过程。

    1. function initState (vm) {
    2. vm._watchers = [];
    3. var opts = vm.$options;
    4. // 初始化props
    5. if (opts.props) { initProps(vm, opts.props); }
    6. // 初始化methods
    7. if (opts.methods) { initMethods(vm, opts.methods); }
    8. // 初始化data
    9. if (opts.data) {
    10. initData(vm);
    11. } else {
    12. // 如果没有定义data,则创建一个空对象,并设置为响应式
    13. observe(vm._data = {}, true /* asRootData */);
    14. }
    15. // 初始化computed
    16. if (opts.computed) { initComputed(vm, opts.computed); }
    17. // 初始化watch
    18. if (opts.watch && opts.watch !== nativeWatch) {
    19. initWatch(vm, opts.watch);
    20. }
    21. }