-
介绍
版本:2.5.17。
我们使用vue-vli创建基于Runtime+Compiler的vue脚手架。
小小的demo
<div id="app">
<p>{{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: '这是任何地方都可以使用的message'
}
})
</script>
-
探究其根源
从入口代码开始分析,我们先来分析
new Vue
背后发生了哪些事情。我们都知道,new
关键字在 Javascript 语言中代表实例化是一个对象,而Vue
实际上是一个类,类在 Javascript 中是用 Function 来实现的可以看到
Vue
只能通过 new 关键字初始化,然后会调用this._init
方法-
入口文件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
方法定义在src/core/instance/init.js
中定义Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等等。
Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ let startTag, endTag // 性能统计相关 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) { // 内部使用Vnode部分使用 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 // 主要就是给vm对象添加了$parent、$root、$children属性,以及一些其它的生命周期相关的标识。 initLifecycle(vm) // 初始化事件相关的属性 initEvents(vm) // vm添加了一些虚拟dom、slot等相关的属性和方法 initRender(vm) callHook(vm, 'beforeCreate') //下面initInjections,initProvide两个配套使用,用于将父组件_provided中定义的值,通过inject注入到子组件,且这些属性不会被观察 initInjections(vm) // resolve injections before data/props //主要就是操作数据了,props、methods、data、computed、watch,从这里开始就涉及到了Observer、Dep和Watcher initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') /* 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、首先一进来,我们给当前vm(vue实例)添加了一个唯一的_uid,然后vm._isVue设为true(监听对象变化时用于过滤vm)。
vm._uid = uid++
2、合并 options
if (options && options._isComponent) {
// 内部使用Vnode部分使用
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
因为options._isComponent只有组件的时候才会是true,所以进到else中,对于options的操作,就是将我们传入的options merage到 vm.$options上 ,如下面的列子vm.$options.el 就是 ‘#app’
var vm = new Vue({
el: '#app',
data: {
message: '这是vue实例'
}
})
3、一些初始化函数
// 主要就是给vm对象添加了$parent、$root、$children属性,以及一些其它的生命周期相关的标识。
initLifecycle(vm)
// 初始化事件相关的属性
initEvents(vm)
// vm添加了一些虚拟dom、slot等相关的属性和方法
initRender(vm)
callHook(vm, 'beforeCreate')
//下面initInjections,initProvide两个配套使用,用于将父组件_provided中定义的值,通过inject注入到子组件,且这些属性不会被观察
initInjections(vm) // resolve injections before data/props
//主要就是操作数据了,props、methods、data、computed、watch,从这里开始就涉及到了Observer、Dep和Watcher
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
4、挂载
在初始化的最后,检测到如果有 el 属性,则调用 vm.$mount 方法挂载 vm,挂载的目标就是把模板渲染成最终的 DOM
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
-
为何能全局访问this.message
var vm = new Vue({ el: '#app', data: { message: 'message可以全局使用' }, mounted() { console.log(this.message) } })
由于初始化vue时调用的 initState(vm),也就是src/core/instance/state.js 中的 initState函数,故this.message可以全局使用,原因请往下看
-
初始化 initState函数
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) } }
根据vm(实例)中参数的不同,调用不通的函数,我们主要看opts.data调用的 initData(vm)
- initData(vm)
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 */) }
- 详解
-
1.判断这个vm.$options.data也就是实例的data是不是函数
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
因为Vue推荐的data写法为:
var vm = new Vue({
el: '#app',
data(){
return() {
message: '这是vue一个实例'
}
},
})
2.接着会调用getData方法
其实很简单,就是将data call在这个实例上,并返回该对象
export function getData (data: Function, vm: Component): any {
// #7573 disable dep collection when invoking data getters
pushTarget()
try {
return data.call(vm, vm)
} catch (e) {
handleError(e, vm, `data()`)
return {}
} finally {
popTarget()
}
}
将getData方法返回的对象赋值给 vm._data
3.如果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
)
}
4.命名不能重复
// 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)
}
}
就是将data中值得key与props还有methods中的值得key进行对比,有重复的就会报错,那是因为这些key都会赋给vm(实例)
5.将变量赋给vm
proxy(vm, `_data`, key)
proxy是当前js的proxy函数,就是一层代理
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)
}
当我们访问vm[key] 就会去访问vm[sourceKey][key] ,vm._data[key]也就是说vm.message 就会去访问vm._data.message也就是vm.data.message,所以 this.message就是this._dara.message,只不过_dara是vue内部使用的
var vm = new Vue({
el: '#app',
data: {
message: '这是一个全局访问的message'
},
mounted() {
console.log(this.message);
console.log(this._dara.message);
}
})
学习文档:https://ustbhuangyi.github.io/vue-analysis/data-driven/new-vue.html