vue的源码解析 小白的进阶之路
2020/3/13 11:32:12
本文主要是介绍vue的源码解析 小白的进阶之路,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一个小白的进阶之路,努力成为大牛的途中,奥利给。(参照一些小册 一些视频)
我坚信明天会更好
数据驱动
new Vue发生了什么
首先是Vue构造器
//做一个限制,只有new关键字 才能初始化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 复制代码
先是对Vue的调用做了一个限制,通过instanceof 判断this所指向的对象是否是Vue的实例(其实就是限制只能通过new指令调用)
if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } 复制代码
然后是调用_init函数 传递过去一个options 其实就是 创建一个Vue实例时传递过去的参数对象.
_init方法在initMixin(Vue)时初始化挂载到Vue构造器的原型上
xport function initMixin (Vue: Class<Component>) { // _init的作用:合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等等合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、 // watcher 等等合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等等合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、 //watcher 等等 Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ 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') /* 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) } /** * 针对runtime+compiler 写 el和template * runtimeOnly render+mount */ //重点 if (vm.$options.el) { vm.$mount(vm.$options.el) } } } 复制代码
代理
new Vue({ data() { return { msg:2 } }, mounted() { console.log(this.msg);//2 } }); 复制代码
你肯定会好奇 为什么为什么通过this.msg能访问到data里面的msg的值 其实是data里面定义的数据挂载到了Vue实例上
_init函数执行时会初始化一系列东西 包括生命钩子等
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') 复制代码
data里面定义的数据挂载到了Vue实例上就是在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) } } 复制代码
如果有props就会调用initProps 有methods就会调用 initMethods 有data就会调用initData 我们这里主要看initData函数
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是一个函数还是一个对象 如果是函数就会调用getData 如果不是函数 就会判断data是否有值 有值则会返回该data 如果没有值 则默认为空对象
let data = vm.$options.data data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {} 复制代码
getData内部其实就是对data函数显示绑定调用 然后把函数返回值返回
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() } } 复制代码
之后会通过Object.keys获取data对象的属名 然后遍历数组 判断data的属性名是否与props和methods里面的key相同 如果相同 则会发错一个警告 所以data里面定义的key不能与props和methods里面的key相同 然后 调用proxy -> proxy(vm, _data
, key) PS:_data主要是在之前执行了 this._data = data 所以指向一个对象
// 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 */) } 复制代码
Vue3.0与Vue2.x
proxy与Object.defineProperty
Object.definedProperty
- 1.不能监听数组变化,数组的一些方法被Vue重写了.
- 2.不能监听对象本身,而是监听对象属性,不能对原来不存在对象上的属性进行监听.
Proxy
- 1.可以监听数组变化
- 2.监听的是对象本身
这篇关于vue的源码解析 小白的进阶之路的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南