vue2.0 源码解读(一)

又看完一遍中文社区的教程接下来开始做vue2.0的源码解读了!

注:解读源码时一定要配合vue2.0的生命周期和API文档一起看

vue2.0的生命周期分为4主要个过程

create。创建---实例化Vue(new Vue) 时，会先进行create。
mount。挂载---根据el, template, render方法等属性，会生成DOM，并添加到对应位置。
update。更新---当数据发生变化后，更新DOM。
destory。销毁---销毁时执行。

接下来再看看生命周期图是不是很明朗呢?

源码地址 https://github.com/vuejs/vue

带你们进入源码中看看new vue的简略过程

第一步 new Vue({})

G:vue-devsrccoreinstanceindex.js

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)    //调用 init.js中 Vue.prototype._init
}

initMixin(Vue)    //ctrl+鼠标左键跳入
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

注:以下源码太长不做全部复制简要截图(注意我会截行数)源码上去!

G:vue-devsrccoreinstanceinit.js

看到生命周期函数了吧!

在beforeCreate之前对生命周期/事件/render 进行了初始化

beforeCreate和creted之间执行的initState(vm) 函数主要是对data/props/computed/watch等进行监听

create完毕之后看mount

G:vue-devsrccoreinstanceinit.js

点击$mount

进入G:vue-devflowcomponent.js

可以看出执行是Component方法

在这个文件中你可以看到vue的几乎全部接口,跳进来看了一遍发现应该是跳错了不过我还是熟悉了一下里面的额接口

然后我搜索 Vue.prototype.$mount 找到G:vue-devsrcentriesweb-runtime-with-compiler.js

我之前有说过上面的东西没用么没有吧(死鸭子嘴硬着呢!)

G:vue-devsrcentriesweb-runtime-with-compiler.js在改文件中主要对el, template, render 三个属性进行处理

  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        delimiters: options.delimiters
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  return mount.call(this, el, hydrating)

这里分享一个看源码的小技巧

就是实在看不懂的时候去api 中找找也许能很好的帮助你理解 ----比如最后一个参数 (第一反应什么玩意啊)

有的时候甚至都不需要再回去看源码了哈哈

今天就看到这有时间继续

眼睛好疼啊!!!---可能发烧了

有人问阅读源码有个卵用

如果你只是想用一下当然没啥卵用了,而且只要按路上照规范来工作中也不会遇见很深的问题但是如果你想再前端方向上走得远,玩的6666666你就需要深度阅读一下了,

比如上个文件可以看出 render>template>el的哈哈但是我今天看到说单文件组件(.vue)写法都会被整合成render的写法