day129-vuejs源码-数据绑定原理-1

前言

这里从initData开始入手
initData作用是初始化data中的数据,之后Observer数据,监听数据的变化。

代码


/**
* https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js
* initData主要是初始化data中的数据,将数据进行Observer,监听数据的变化,其他的监视原理一致
* @param vm
*/
function initData (vm: Component) {
let data = vm.$options.data
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
// 判断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
// 遍历data中的一些声明
while (i--) {
const key = keys[i]
if (process.env.NODE_ENV !== 'production') {
// 检查methods命名和data中命名的冲突
if (methods && hasOwn(methods, key)) {
warn(
`Method "${key}" has already been defined as a data property.`,
vm
)
}
}
// 检查props命名和data中命名的冲突
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)) {
// 将data中的属性代理到vm实例上
proxy(vm, `_data`, key)
}
}
// observe data
// 开始对数据进行绑定
// asRootData表示作为根数据,observe会递归对深层对象的绑定
observe(data, true /* asRootData */)
}
文章作者: lmislm
文章链接: http://lmislm.com/2019/05/21/2019-05-21/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog