8
3c4c622341
前端statt • 于 2018-09-09发布 • 47次阅读 • (原文: gitissue.com)

写了一个月的vue项目,个人感觉,emm…
一旦熟悉了尤大给我们画好的舒适圈,很容易就陷在业务代理里,主要是vue封装的太好了,写代码几乎不用脑,只要按照规范一顿瞎写,怎么都过得去。
长久下去,写多了感觉会废,暂时还没用到服务端渲染,就是简单的前后端分离的web app,要想深入一点,感觉还是得多看看源码,免得最后成为了API工程师

前端娱乐圈,之前有一条喷vue,说用vue的都是小白或者菜鸟,其实从某种角度来说也有点道理

个人一直认为,三大框架框架没有优劣之分,只有最合适的业务场景,都是神写出来的东西,我等凡人达不到那个水平之前,何来的资格讨论人家的优劣;个人喜好与客观优劣不是一回事。

但对于用框架的人本身来说,那还是有点影响的,react越用越灵活,vue越用越。。。看完源码再说哈哈哈

这个vue源码阅读系列,参考着各路大神的文章学习,都是记录来自己看的,不太合适star了本blog的朋友们观看

Vue定义

src/core/instance/index.js

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)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

Vue实质上是一个Function实现的类,只能通过new Vue去实例化它

为何不用ES6的class去实现呢?
因为下面有很多xxxMixin的函数调用,用于给Vue的prototype上扩展一些方法,而这些扩展需要按照功能分散到各个模块中去实现,而不是在一个模块里实现所有,这些方式是class难以实现的。
这样做的好处是非常方便代码的维护和管理

src/core/global-api/index.js中还通过initGlobalAPI方法给Vue对象扩展了一些全局的静态方法

export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  Object.defineProperty(Vue, 'config', configDef)

  // exposed util methods.
  // NOTE: these are not considered part of the public API - avoid relying on
  // them unless you are aware of the risk.
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }

  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

  Vue.options = Object.create(null)
  ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  Vue.options._base = Vue

  extend(Vue.options.components, builtInComponents)

  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
}
暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册
Top