摘要:问中发生了什么先从语法上分析,关键字在语言中代表实例化一个对象而实际上是一个类我们简单看一下源码源码地址从源码可以看到类中非常干净,只是执行了一个私有函数并且只能通过关键字初始化接着我们追踪至函数源码地址从上面的代码我们看见很清淅的
20190214问
new Vue()中发生了什么?
先从语法上分析,new关键字在js语言中代表实例化一个对象, 而Vue实际上是一个类, 我们简单看一下源码
源码地址 https://github.com/vuejs/vue/...
// 从源码可以看到vue类中非常干净,只是执行了一个_init私有函数, 并且只能通过new关键字初始化 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函数
源码地址 https://github.com/vuejs/vue/...
export function initMixin (Vue: Class) { 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) } if (vm.$options.el) { vm.$mount(vm.$options.el) } } }
从上面的代码我们看见_init很清淅的干了几件事, 合并相关配置, 初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等
题外话Vue初始化逻辑非常清淅,把不同的功能拆成一些多带带的函数执行,这种思想值得借鉴和学习
关于JS每日一题JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案
注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路
点击加入答题
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101705.html
摘要:什么情况下适合使合使用中有几个步骤开始之前先简单了解一下定义是一个状态管理机制采用集中式存储应用所有组件的状态嗯,就是一句话能说明白的,没明白的,我们用代码再理解一下什么叫集中式式存储比如下面这段代码,同时需要用到,那么我们首先能想到就是在 20190121 什么情况下适合使合vuex?Vuex使用中有几个步骤? 开始之前先简单了解一下vuex 定义: vuex是一个状态管理机制,采用...
摘要:问有哪些钩子使用场景的实现可以点这里前面我们用大白话讲过什么是钩子,这里在重复一下,就是在什么什么之前什么什么之后英文叫专业点叫生命周期,装逼点可以叫守卫中也存在钩子的概念分为三步记忆全局守卫路由独享守卫组件独享守卫全局守卫很好理解,全 20190218问 Vue-router有哪些钩子?使用场景? router的实现可以点这里 前面我们用大白话讲过什么是钩子,这里在重复一下,就是在...
阅读 1669·2021-11-17 09:33
阅读 3531·2021-11-16 11:40
阅读 3055·2019-08-30 11:23
阅读 1047·2019-08-29 16:36
阅读 2464·2019-08-29 13:23
阅读 1738·2019-08-29 12:59
阅读 1542·2019-08-29 12:42
阅读 1978·2019-08-28 18:22