当前位置: 首页 > news >正文

vue2初始化过程

Vue2 的初始化过程主要包括以下几个核心步骤:

1. 初始化流程概述

// Vue 构造函数
function Vue(options) {this._init(options)
}

2. 初始化阶段

2.1 _init() 方法

Vue.prototype._init = function(options) {const vm = this// 合并配置if (options && options._isComponent) {// 组件配置合并initInternalComponent(vm, options)} else {vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor),options || {},vm)}// 初始化生命周期、事件、渲染等initLifecycle(vm)        // 初始化生命周期initEvents(vm)           // 初始化事件initRender(vm)           // 初始化渲染callHook(vm, 'beforeCreate') // 调用 beforeCreate 钩子initInjections(vm)       // 初始化注入initState(vm)            // 初始化状态(核心)initProvide(vm)          // 初始化提供callHook(vm, 'created')  // 调用 created 钩子// 挂载if (vm.$options.el) {vm.$mount(vm.$options.el)}
}

2.2 初始化状态 (initState)

function initState(vm) {vm._watchers = []const opts = vm.$optionsif (opts.props) initProps(vm, opts.props)if (opts.methods) initMethods(vm, opts.methods)if (opts.data) {initData(vm)           // 初始化 data,进行响应式处理} else {observe(vm._data = {}, true)}if (opts.computed) initComputed(vm, opts.computed)if (opts.watch) initWatch(vm, opts.watch)
}

2.3 响应式系统初始化

function initData(vm) {let data = vm.$options.datadata = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}// 代理 data 到 vm 实例上const keys = Object.keys(data)let i = keys.lengthwhile (i--) {proxy(vm, '_data', keys[i])}// 观察数据observe(data, true)
}

3. 挂载阶段

3.1 $mount 方法

Vue.prototype.$mount = function(el, hydrating) {el = el && query(el)const options = this.$options// 解析 template/el 为 render 函数if (!options.render) {let template = options.templateif (template) {// 编译模板const { render, staticRenderFns } = compileToFunctions(template,{...})options.render = renderoptions.staticRenderFns = staticRenderFns}}return mount.call(this, el, hydrating)
}

4. 完整的初始化流程总结

  1. 合并配置:合并构造函数选项和实例选项
  2. 初始化生命周期:建立组件关系,初始化 $parent、$children 等
  3. 初始化事件:处理父组件传递的事件
  4. 初始化渲染:创建 $slots、$scopedSlots,定义 $createElement
  5. 调用 beforeCreate 钩子
  6. 初始化注入:处理 inject 选项
  7. 初始化状态(核心步骤):
    • 初始化 props
    • 初始化 methods
    • 初始化 data(响应式处理)
    • 初始化 computed
    • 初始化 watch
  8. 初始化提供:处理 provide 选项
  9. 调用 created 钩子
  10. 挂载:如果存在 el 选项,自动调用 $mount 方法

这个过程建立了 Vue 实例的响应式系统,为后续的数据变化侦测和视图更新奠定了基础。

http://www.hskmm.com/?act=detail&tid=30138

相关文章:

  • [Doris/函数] Doris 之数据查询
  • 如何用AI绘制程序时序图
  • LLVM 后端支持 RISCV 矩阵扩展都有哪些方式
  • 简单聊聊数据可视化大屏制作的前端设计与后端开发
  • [THUWC 2018] 字胡串
  • 标识符
  • 2025 年钢结构厂家推荐榜:箱型H型/厂房仓库/电厂/桥梁/农牧业/锅炉/场馆/高层框架/装配式钢结构工厂,聚焦安全与品质,助力建筑项目精准选品
  • 2025 年粮库空调厂家最新推荐榜:聚焦技术创新与实用适配,助力粮库精准选购优质设备粮库空调一体机/粮库空调机组/碳钢喷塑粮库空调/低温粮库空调厂家推荐
  • 2025 年最新推荐!泳池除湿热泵厂家推荐榜单重磅发布,全方位解析优质厂家实力助您选对设备双模式/多功能/三集一体/全直流变频/室内/变频式泳池除湿热泵厂家推荐
  • django template filter safe escapejs json_script等
  • 2025年GEO(AI搜索优化)厂家口碑推荐排行榜
  • 2025年GEO(AI搜索优化)源头厂家权威推荐榜单:云视有客科技领跑行业新纪元
  • 2025年GEO服务商口碑推荐榜单:顶尖AI搜索优化厂家全方位解析
  • 2025年GEO(AI搜索优化)厂家口碑推荐榜:云视有客科技领跑行业创新
  • 2025 年涡流分离器源头厂家最新推荐排行榜:聚焦国内优质企业,助力制造企业精准采购可靠分离设备旋转分配器/油路分配器/离心过滤器厂家推荐
  • 欧美(美股、加拿大股票、墨西哥股票)股票数据接口文档
  • 2025年GEO(AI搜索优化)服务商口碑排行榜
  • vue播放rtsp流方案
  • 2025年GEO(AI搜索优化)源头厂家权威推荐榜单:云视有客科技领跑行业
  • 2025年GEO(AI搜索优化)公司口碑推荐排行榜单
  • 基于MATLAB的天线方向图综合与雷达天线设计
  • ​个人微信机器人开发
  • Kong Gateway 实操实例:代理上游服务并配置限流插件 - 指南
  • 2025 年最新二手手机交易公司推荐排行榜:聚焦企业的专业与诚信实力,为消费者精选可靠选择
  • 项目管理中的批量更新如何帮助节省时间和工作量?
  • 第三届大数据与数据挖掘国际会议(IEEE BDDM 2025)
  • CSS学习日记
  • 基于MATLAB的波导杆超声波传播仿真程序集设计与实现
  • for 循环中range的部分
  • JAVA函数式编程