在前两篇文章中,我分别介绍了Vue的构建流程
和Vue入口文件
。有了这些前期的准备工作,下面我将带大家正式深入源码学习。
Vue
的一个核心思想是数据驱动
,相信大家一定对这个不陌生。所谓数据驱动,就是视图由数据驱动生成。相比传统的使用jQuery
等前端库直接操作DOM
,大大提高了开发效率,代码简洁易维护。
在接下来的几篇文章中,我将主要分享数据驱动
部分相关的源码解读。
先来看一个简单的例子:
<div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data() { return { message: 'hello Vue!' } } }) </script> 复制代码
最终页面展示效果是:
如上图所示,页面上显示hello Vue!
,也就是说Vue
将js
里的数据渲染到DOM
上,也就是数据驱动视图
,这个渲染过程就是最近几篇文章我们要着重分析的。
本篇文章,我们先来一起看下new Vue
发生了什么。
在上一篇文章中,我们介绍了Vue构造函数
是定义在src/core/instance/index.js
中的:
// 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) } 复制代码
构造函数的核心是调用了_init
方法,_init
定义在src/core/instance/init.js
中:
// src/core/instance/init.js Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ [1] let startTag, endTag /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed vm._isVue = true // merge options if (options && options._isComponent) { // optimize internal component instantiation // since dynamic options merging is pretty slow, and none of the // internal component options needs special treatment. initInternalComponent(vm, options) } else { vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real self vm._self = vm initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') [2] /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`vue ${vm._name} init`, startTag, endTag) } if (vm.$options.el) { vm.$mount(vm.$options.el) } } 复制代码
梳理下这里面的执行流程:
[1]
和[2]
之间的代码主要是进行了性能追踪
,参考官网:
接下来是一个合并options
的操作。
接下来调用了很多初始化函数,从函数名称可以看出分别是执行初始化生命周期、初始化事件中心、初始化渲染等操作。文章开头的 demo 中有定义data
选项,我们先来分析下initState
是如何处理data
的:
// src/core/instance/state.js export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(vm, opts.props) if (opts.methods) initMethods(vm, opts.methods) if (opts.data) { initData(vm) } else { observe(vm._data = {}, true /* asRootData */) } if (opts.computed) initComputed(vm, opts.computed) if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch) } } 复制代码
可以看到,initState
函数是对props
、methods
、data
、computed
、watch
这几项的处理。我们现在只关注initData
对data
的初始化:
// src/core/instance/state.js function initData (vm: Component) { let data = vm.$options.data data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {} if (!isPlainObject(data)) { data = {} process.env.NODE_ENV !== 'production' && warn( 'data functions should return an object:\n' + 'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', vm ) } // proxy data on instance const keys = Object.keys(data) const props = vm.$options.props const methods = vm.$options.methods let i = keys.length while (i--) { const key = keys[i] if (process.env.NODE_ENV !== 'production') { if (methods && hasOwn(methods, key)) { warn( `Method "${key}" has already been defined as a data property.`, vm ) } } if (props && hasOwn(props, key)) { process.env.NODE_ENV !== 'production' && warn( `The data property "${key}" is already declared as a prop. ` + `Use prop default value instead.`, vm ) } else if (!isReserved(key)) { proxy(vm, `_data`, key) } } // observe data observe(data, true /* asRootData */) } 复制代码
这里给实例添加了属性_data
并把data
赋值给它,然后判断data
如果是一个函数的话会检查函数返回值是不是纯对象,如果不是会抛出警告。
我们知道,在Vue
中,data
属性名和methods
中的函数名、props
的属性名都不能重名,这就是接下来的代码所做的工作了。这里遍历了data
的所有属性,去和methods
和props
中的进行对比,如果有重名则会抛出警告。如果没有重名并且isReserved
返回 false 的话,就接着执行proxy
方法。下面是proxy
部分的代码:
// src/core/instance/state.js const sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop } export function proxy (target: Object, sourceKey: string, key: string) { sharedPropertyDefinition.get = function proxyGetter () { return this[sourceKey][key] } sharedPropertyDefinition.set = function proxySetter (val) { this[sourceKey][key] = val } Object.defineProperty(target, key, sharedPropertyDefinition) } 复制代码
这里其实是做了一层代理,先是定义一个属性描述符sharedPropertyDefinition
,然后调用Object.defineProperty
,意思就是当访问/修改target.key
时会触发get/set
,代理到this[sourceKey][key]
(即vm[_data][key]
)上。
先来看一下,平时我们是怎么写Vue
的:
<script > export default { data() { return { name: '森林' } }, methods: { print() { console.log(this.name); } } } </script> 复制代码
在methods
中通过this.name
就能直接访问到data
里面的值(实际上是访问了this._data.name
)。到这里,我们就清楚了为什么在initData
一开始的代码,开头有一行是将data
保存到vm._data
中。
回到initData
中,接着上面的继续往下走,最后就是调用observe
对数据做了响应式处理。响应式处理
部分比较重要,我会在后面的章节中详细分析。
看完initData
,我们回到_init
函数。经过一系列的初始化操作后,最后一步是判断vm.$options.el
是否存在,也即传入的对象是否有el
属性,有的话就调用vm.$mount
进行挂载,挂载的目标就是把模板渲染成最终的DOM
。
通过本篇文章,我们知道了执行new Vue
后其实是执行_init
进行了一系列初始化的操作。本文呢,我们是把_init
函数大致的执行流程梳理了一遍。上文也提到函数的最后调用了vm.$mount
进行挂载,这一步操作是数据渲染到DOM
上的关键,在下一篇中,我会带大家一起看下$mount
内部具体进行了什么操作。