县级门户网站建设运营成本,wordpress返回上页,网站建设 深圳信科公司,长春自媒体公司从入口代码开始分析#xff0c;我们先来分析 new Vue 背后发生了哪些事情。我们都知道#xff0c;new 关键字在 Javascript 语言中代表实例化是一个对象#xff0c;而 Vue 实际上是一个类#xff0c;类在 Javascript 中是用 Function 来实现的#xff0c;来看一下源码我们先来分析 new Vue 背后发生了哪些事情。我们都知道new 关键字在 Javascript 语言中代表实例化是一个对象而 Vue 实际上是一个类类在 Javascript 中是用 Function 来实现的来看一下源码在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)
}
可以看到 Vue 只能通过 new 关键字初始化然后会调用 this._init 方法 该方法在 src/core/instance/init.js 中定义。
Vue.prototype._init function (options?: Object) {const vm: Component thisvm._uid uidlet startTag, endTagif (process.env.NODE_ENV ! production config.performance mark) {startTag vue-perf-start:${vm._uid}endTag vue-perf-end:${vm._uid}mark(startTag)}vm._isVue trueif (options options._isComponent) {initInternalComponent(vm, options)} else {vm.$options mergeOptions(resolveConstructorOptions(vm.constructor),options || {},vm)}if (process.env.NODE_ENV ! production) {initProxy(vm)} else {vm._renderProxy vm}vm._self vminitLifecycle(vm)initEvents(vm)initRender(vm)callHook(vm, beforeCreate)initInjections(vm)initState(vm)initProvide(vm)callHook(vm, created)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)}
}
Vue 初始化主要就干了几件事情合并配置初始化生命周期初始化事件中心初始化渲染初始化 data、props、computed、watcher 等等。
总结
Vue 的初始化逻辑写的非常清楚把不同的功能逻辑拆成一些单独的函数执行让主线逻辑一目了然这样的编程思想是非常值得借鉴和学习的。
由于我们这一章的目标是弄清楚模板和数据如何渲染成最终的 DOM所以各种初始化逻辑我们先不看。在初始化的最后检测到如果有 el 属性则调用 vm.$mount 方法挂载 vm挂载的目标就是把模板渲染成最终的 DOM那么接下来我们来分析 Vue 的挂载过程。
