Foreword
Vue recently plunged into a comprehensive source parsing, the study notes as well as a series of summary of some individuals
- The first step in the preparatory work
- Vue to download the source code on GitHub (can not make bricks without straw)
- Use your favorite editor to open source
- vue main source of resources in the file src
- Put a very popular explanation vue data responsive Figure children
- The second step understanding of the directory structure
- The third step is to sort out a return only one line (this time we mainly to sort out new vue vue instance what had been done)
- vue flow static type checking with (flow of how it works can take a look at the official website)
- vue with a rollup build (why not webpack?)
- Write demo (new vue example) scaffold (vue-cli)
- Vue definition function (src / core / instance / index.js source path) in the index.js
-
mport { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from './render' import { eventsMixin } from './events' import { lifecycleMixin } from './lifecycle' import { warn } from '../util/index' /*Github:https://github.com/answershuto*/ function Vue (options) { //vue 函数 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
- 初始化inti函数 定义了 _inti(src/core/instance/inti.js 源码路径)
- 在inti 很重要的是合并了options(你在new vue 实例传的参数)
- mergeOptions主要调用两个方法,resolveConstructorOptions和mergeOptions。(实例化组件还是实例化对象)
- 合并options 后检查 是否有el (肯定不陌生 el:'#app')
if (vm.$options.el) { /*挂载组件*/ vm.$mount(vm.$options.el) }
- 迎来很重要的函数 $mount (重点记下这个函数)
- 挂载后 打开浏览器页面 打开调试工具 查看dom结构
- 可以看到el对应的dom
-
Fannie式总结
-
本章的结构我觉得已经是非常的清晰了
-
$mount 函数具体又做了什么?请听下回分解
-
跟着我 突破vue源码坑