new Vue 发生了什么

本文详细剖析了Vue.js实例化过程中的关键步骤,包括配置合并、生命周期初始化等,并介绍了核心功能模块的初始化流程。

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 = 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)

  }

}

Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等等。

总结

Vue 的初始化逻辑写的非常清楚,把不同的功能逻辑拆成一些单独的函数执行,让主线逻辑一目了然,这样的编程思想是非常值得借鉴和学习的。

在初始化的最后,检测到如果有 el 属性,则调用 vm.$mount 方法挂载 vm,挂载的目标就是把模板渲染成最终的 DOM。

`new Vue` 是用于创建一个 Vue 实例的关键语法。通过这个实例,你可以初始化和管理基于 Vue.js 框架的应用程序或组件。下面是对它的详细解析: ### 1. 基本形式 ```javascript new Vue({ // 配置选项 }) ``` 当你执行 `new Vue({...})` 时,Vue 会依据传入的对象配置生成一个新的应用实例,并将指定的模板挂载到页面上。 --- ### 2. 主要配置项解释 - **el**: - 类型:字符串 (CSS选择器) - 功能:绑定 DOM 元素作为 Vue 应用的作用域区域。例如,`el: '#app'` 表明此 Vue 实例将会接管 HTML 页面中 ID 为 app 的 div 区块。 - **data**: - 类型:对象 | 函数(当在一个组件内使用时) - 功能:包含所有需要被响应的数据属性。如: ```javascript data() { return { message: 'Hello World' } } ``` - **methods**: - 类型:对象 - 功能:定义一些可以在事件触发或其他地方调用的方法函数。比如点击按钮改变文本可以这么写: ```javascript methods:{ changeMessage(){ this.message = "Changed Message"; } } ``` - **computed**: - 类型:对象 - 功能:计算属性,基于已有数据动态派生新值并且自动缓存更新后的状态除非关联依赖发生变动。相比于普通 method 来说更高效简洁。 - **watch**: - 类型:对象 - 功能:监听特定数据的变化然后做出反应,允许开发者添加副作用操作等复杂逻辑。 --- ### 简单示例 假设有一个简单的网页想要打印消息以及修改该消息的功能,则可以用如下代码实现: ```html <div id="example"> {{ message }} <button @click="reverseMessage">反转消息</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script> var vm = new Vue({ el: '#example', data: function () { return {message:"原始信息"} }, methods:{ reverseMessage:function(){ var words=this.message.split(''); this.message=words.reverse().join(''); } } }); </script> ``` 这里我们先引入了官方提供的 CDN 版本库文件加载完毕后再编写脚本来完成交互需求。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值