8.最俗学习之-Vue源码学习-数据篇(下)

源码地址

new Watcher(vm, expOrFn, cb, options)，对于这个对应的文件在src/observer/watcher.js
关于这个也看了很多的文章，自己也有写了学习的笔记，不过最后还是决定引用一篇文章，因为大概
的思路也就是这样子，然后再Vue的实现里面还有很多复杂的东西，我也没怎么看懂，但是那些都是一
些辅助的东西，并不是主要的核心功能，看完下面这篇文章即可明白dep和watch和observer的关系

看这里

看这里

看这里

深入浅出Vue基于“依赖收集”的响应式原理

之前还有几个问题剩下的，今天把它看一下

Vue.set = set // 涉及到Vue的数据响应式系统，先保留

Vue.delete = del // 涉及到Vue的数据响应式系统，先保留

  
  


  

    
{{msg}}
    
{{v}}
    
    
  

然后到了这个问题：initExtend(Vue)，对应的源码在src/core/global-api/extend.js

// 这里我们用官网的例子来说




  
  


  


  






// --------------下面是方法对应的源码-----------------------------------


export function initExtend (Vue: GlobalAPI) {
  /**
   * Each instance constructor, including Vue, has a unique
   * cid. This enables us to create wrapped "child
   * constructors" for prototypal inheritance and cache them.
   */
  Vue.cid = 0
  let cid = 1

  /**
   * Class inheritance
   */
  Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    const Super = this  // 重点，这个this是Vue的构造函数
    const SuperId = Super.cid  // 一个编号
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})  // 缓存的值
    if (cachedCtors[SuperId]) {  // 是否有缓存过的
      return cachedCtors[SuperId]
    }
    const name = extendOptions.name || Super.options.name  // 获取name，不是重点
    if (process.env.NODE_ENV !== 'production') {  // 一些操作的判断和提示
      if (!/^[a-zA-Z][\w-]*$/.test(name)) {
        warn(
          'Invalid component name: "' + name + '". Component names ' +
          'can only contain alphanumeric characters and the hyphen, ' +
          'and must start with a letter.'
        )
      }
    }
    const Sub = function VueComponent (options) {  // 这个Sub就是最后返回的方法
      this._init(options)  // 就是我们初始化的Vue的步骤，很熟悉的东西
    }
    Sub.prototype = Object.create(Super.prototype)  // 以Vue的构造函数为原型的原型
    Sub.prototype.constructor = Sub  // 自身的constructor
    Sub.cid = cid++  // 静态属性cid，一个编号
    Sub.options = mergeOptions(  // 合并，很熟悉的东西，就是我们最开始new Vue的时候数据合并的步骤
      Super.options,
      extendOptions
    )
    Sub['super'] = Super  // 获取Super上面的东西
    // allow further extension/mixin/plugin usage
    Sub.extend = Super.extend  // 同理，获取Super上面的东西
    Sub.mixin = Super.mixin  // 同理，获取Super上面的东西
    Sub.use = Super.use  // 同理，获取Super上面的东西
    // create asset registers, so extended classes
    // can have their private assets too.
    config._assetTypes.forEach(function (type) {  // 这个也很熟悉，组件注册，过滤器，自定义指令的赋值
      Sub[type] = Super[type]
    })
    // enable recursive self-lookup
    if (name) {
      Sub.options.components[name] = Sub
    }
    // keep a reference to the super options at extension time.
    // later at instantiation we can check if Super's options have
    // been updated.
    Sub.superOptions = Super.options  获取各自的options
    Sub.extendOptions = extendOptions  获取各自的options
    // cache constructor
    cachedCtors[SuperId] = Sub  缓存下来
    return Sub  // 返回这个构造函数
  }
}

// 看到了这里，有种感觉就是这个东西把Vue上面的东西都继承下来了，最后返回它，然后new它又
// 调用了Vue的init方法初始化，好吧，懵逼，鉴于官方文档也没说的太详细，这个暂时就只能这么
// 理解了，不过这个应该还有更大的用处的

到了这里大概就剩下渲染的事情了，也就是initRender方法

initLifecycle(vm)
initEvents(vm)
callHook(vm, 'beforeCreate')
initState(vm)
callHook(vm, 'created')
initRender(vm)


主要就是执行vm.$mount方法，这里大概涉及的有：

模板的编译，
生成ast，
生成render，
生成Virtual DOM，
通过snabbdom的方法实现优化，

等等，就是Vue的渲染的操作了

剩下的几个问题

Vue.nextTick = util.nextTick        // 水平有限，看不懂 - -#，dom的异步更新的问题

extend(Vue.options.directives, platformDirectives)  // 水平有限，看不懂 - -#，内置的指令directives，v-bind，v-model，v-show
extend(Vue.options.components, platformComponents)  // 水平有限，看不懂 - -#，内置的组件，transition组件
Vue.prototype.__patch__                             // 水平有限，看不懂 - -#，渲染的方法
compileToFunctions                                  // 水平有限，看不懂 - -#，模板编译的方法


const extendsFrom = child.extends                   // 水平有限，看不懂 - -#

initProxy(vm)                                       // 水平有限，看不懂 - -#