美文网首页
Vue源码解读--Vue的构造函数

Vue源码解读--Vue的构造函数

作者: key君 | 来源:发表于2019-10-10 14:24 被阅读0次
入口文件

文件路径:src/platforms/web/entry-runtime-with-compiler.js

结论是不管用户用el还是template设置模板
最终都会变成render函数

扩展了$mount方法:处理template和el选项
尝试编译它们为render函数
定义$mount方法

文件路径:src/platforms/web/runtime/index.js

主要有两步:
1.执行挂载mountComponent(this, el, hydrating)
2.实现了patch方法

定义全局api

文件路径:src/core/index.js

定义全局api,set delete nextTick
initGlobalAPI(Vue)

Vue构造函数的定义

文件路径:src/core/instance/index.js

function Vue (options) {
  this._init(options)
}
initMixin(Vue)//实现了_init()
stateMixin(Vue)//定义实例属性$data,$props,$set,$delete,$watch
eventsMixin(Vue)//$emit $on
lifecycleMixin(Vue)//_update $forceUpdate $destroy
renderMixin(Vue)//nextTick _render
initMixin内部实现

文件路径:src/core/instance/init.js

//初始化函数的实现
    initLifecycle(vm)//初始化$parent,$root,$children,$refs
    initEvents(vm)//处理父组件传递的监听器
    initRender(vm)//$slots $scopedSlots,_c(),$createElement()
    callHook(vm, 'beforeCreate')
    initInjections(vm) // 获取注入数据
    initState(vm)//初始化组件中props methods data computed watch
    initProvide(vm) // 提供数据
    callHook(vm, 'created')
//先inject再provide的原因是子组件尝试先拿值 拿到值再传给自己的子代 出于这个考虑
//如果有传进来el 初始化完会执行一次
vm.$mount(vm.$options.el)

相关文章

  • Vue源码解读--Vue的构造函数

    入口文件 文件路径:src/platforms/web/entry-runtime-with-compiler.j...

  • new Vue的具体流程

    new Vue做了啥? 打开源码,先找到Vue的构造函数,在vue/src/core/instance/index...

  • vue-组件

    1.Vue中是如何引入组件(对象 构造函数 )1.1. Vue是vue实例的构造函数, 通过new Vue() ...

  • vue源码-vue构造函数

    1. 声明Vue构造函数文件路径 src/core/instance/index.js

  • vue源码心得--Vue对象生成方式(混入)

    part1.源码部分 这里的Vue对象实际上就是通过Vue构造函数实现,即: 为何 Vue 不用 ES6 的 Cl...

  • 浅谈vue3 和 vue2的区别

    vue3中不再导出一个Vue的构造函数,而是具名导出很多数据 不给用户提供Vue构造函数来创建vue实例,使用一个...

  • VUE学习笔记 - 实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动 在实例化 Vue 时,...

  • vue初体验

    案例1 展示简单数据 vue就类似一个构造函数,用构造函数构造出一个实例,并往构造函数中传入参数,而vue中的参数...

  • Vue基础

    Vue实例 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的。 每个 Vue 实...

  • 3 Vue 实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: 虽然没有完全遵循 ...

网友评论

      本文标题:Vue源码解读--Vue的构造函数

      本文链接:https://www.haomeiwen.com/subject/nusopctx.html