关于vue.js:vue源码分析一源码入口

21次阅读

共计 3204 个字符，预计需要花费 9 分钟才能阅读完成。

vue 提供不同的平台和版本，浏览器环境版本包含：Runtime only 版本和 Runtime + compiler 版本。Runtime + compiler 版本：new Vue({template: ‘<div>{{ hi}}</div>’}), 须要将 template 中的字符串编译成 render 函数，须要用到 compiler，具体在 scripts\config.js

const builds = {
  'web-runtime-cjs-dev': {entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.common.dev.js'),
    format: 'cjs',
    env: 'development',
    banner
  },
  ...
  'web-full-cjs-dev': {entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.common.dev.js'),
    format: 'cjs',
    env: 'development',
    alias: {he: './entity-decoder'},
    banner
  },
  ...
 }

本文剖析 runtime + complier 版本，entry 属性值就是 Vue 源码入口，接下来查看 web/entry-runtime-with-compiler.js

import Vue from './runtime/index'
...
// 将 runtime/index.js 中定义的 mount 办法缓存
const mount = Vue.prototype.$mount
// 重写 $mount
// runtime + compiler 版本的 mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean // 和服务器渲染无关
): Component {el = el && query(el)

  /* istanbul ignore if */
  // el 不能时 body 和 html
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(`Do not mount Vue to <html> or <body> - mount to normal elements instead.`)
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  // 如果没有定义 render 办法，则会把 el 或者 template 字符串转换成 render 办法
  if (!options.render) {
    let template = options.template
    // 获取 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')
      }
      // 将 template 转换成 render 函数 compileToFunctions
      const {render, staticRenderFns} = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  // 这里调用的 mount 是下面被缓存的 mount
  return mount.call(this, el, hydrating)
}

这里的 Vue 还是通过 import 引入，一路向上找，最终找到 src\core\instance\index.js

// Vue 构造函数
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 是什么
  // initMixin 给 Vue 增加此办法
  this._init(options)
}
// 初始化
// if (vm.$option.el) {
//   $mount 负责挂载
//   vm.$mount(vm.$option.el)
// }
initMixin(Vue)
// 初始化 state
// Vue.prototype.$set = set
// Vue.prototype.$delete = del
// Vue.prototype.$watch = function
stateMixin(Vue)
// 事件
// $on,$emit,$once,$off 和本人写的 class bus 没有太大区别
// $emit 触发以后组件的事件
eventsMixin(Vue)
// _update !!!!!!!!!!!!!!!!
// forceUpdate,destroy
lifecycleMixin(Vue)
// 渲染
// nextTick
// _render !!!!!!!!!!!!
renderMixin(Vue)

export default Vue

能够看到 Vue 的实质是一个 function，之所以用 function 而没有用 es6 的 class，是因为在后续会在 Vue 函数原型上挂载了很多 api 绝对于 class 更不便，Vue 是通过 xxxMixin 调用不同目录下的办法组装成残缺 Vue