vue2 框架运行原理剖析系列(一)之 new Vue()实例化过程到底做了什么!!!

一、vue 基础用法

1.1 引入vue
1.2 使用vue语法编写ui
1.3 实现数据绑定
示例代码如下

<div id="app">
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

1.4 代码效果:使用浏览器打开对应的的html文件,则会看到Hello Vue!
在这里插入图片描述

二、源码下载

2.1 在(一)中,我们在script标签中,编写了vue.js 提供的vue 实例化语法,创建了一个vue实例。并将文档中id 为app 下的 {{message}} 文本替换成了实例内的 message变量的真实值,完成渲染。
2.2 那么上面的过程中,vue.js 帮我们完成了哪些工作呢?下面带大家深入源码。
2.3 下载源码后(vue 2.6 源码地址)执行 npm install 安装依赖,安装完毕后,执行 npm run dev 启动项目,其编译的文件 位于 dist/vue.js 文件
在这里插入图片描述

2.4 在example 目录中,vue 提供很多demo ,我们可以将其脚本引入的路径改为经过2.3 编译过的文件,这样我们在调试源码的时候,更改文件后,便会同步到vue.js 脚本,方便调试。
在这里插入图片描述

三、npm run dev 的做了什么

3.1 在 package.json 文件中 ,找到 scripts 字段下的 dev ,可以看到,该命令执行 rollup 工具,并将 scripts/config.js 文件 作为 配置文件,传入 TARGET 值为:web-full-dev
在这里插入图片描述
3.2 在config.js 的 builds 变量中,找到与 web-full-dev 匹配的配置如下:

 // Runtime+compiler development build (Browser)
  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner

3.3 上面的配置中,以src/platforms/web/entry-runtime-with-compiler.js 作为整个vue.js 框架打包入口,接下来,我们具体分析一下改文件

四、顺藤摸瓜,寻找 vue 实例化具体代码

4.1 在entry-runtime-with-compiler.js 文件中 ,发现以下代码,他重写了 vue原型的 mount 方法,

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
){
	 return mount.call(this, el, hydrating)
}

4.2根据文件引入路径,可以知道 4.1的 Vue 来 自src/platforms/web/runtime/index,这个文件在Vue 原型中定义了mount 方法

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

其中 mountComponent具体分析要到后面文章,本文不具体分析,该方法主要是调用了render函数,渲染UI,如果存在 需要监听的数据,则设置其为可观测对象,当其发生变化时,便会通知Watcher 更新视图。

4.3 根据 4.2 引入Vue 的路径,可以找到src/core/instance/index.js 文件,代码内容如下

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
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之前执行,应该是在引入vue.js 的时候执行
console.log("开始执行initMinxin")
initMixin(Vue)//给Vue 的原型挂载 _init 方法 ->_init 做了什么
stateMixin(Vue)//给vue原型挂载$watche $set 和$delete $data $props
eventsMixin(Vue)//给原型$on 
lifecycleMixin(Vue)//给原型挂载 _update方法,这个方法就是视图更新的底层源码
renderMixin(Vue)//给原型挂载 $nextTick、  _render->生成虚拟DOM 的算法

export default Vue

五、Vue 实例化

5.1 在四 中我们找到 函数 Vue ,当我们执行 new Vue() 时,实际上执行的是 Vue 函数,里面执行了_init 方法
5.2 _init 具体代码位置如下
在这里插入图片描述
代码内容如下

Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++
    let startTag, endTag
 
    // 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 {
      debugger
      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)
    }
  }

5.3 其中 initState 方法 将 实例化传入的参数(data、watch、methods)进行处理,处理后可以通过this 访问到
5.4 在 init 方法中,还会判断是否传入 el 选项,如果传入了,则直接调用 原型的 vm.$mount 方法,该方法就是 指向 entry-runtime-with-compiler.js 的 Vue.prototype.mount ,这个方法就会在后续文章持续讲解

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/19457.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nessus 10.5 Auto Install for macOS Ventura(自动化安装 Nessus 试用版)

发布 Nessus 试用版自动化安装程序&#xff0c;支持 macOS Ventura、RHEL 9 和 Ubuntu 22.04 请访问原文链接&#xff1a;https://sysin.org/blog/nessus-auto-install-for-macos/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.o…

js实现产品页点击小图在大图区显示

企业网站产品图片可能会比较多&#xff0c;需要在产品页面多放几张展示图片&#xff0c;我们可以使用一张大图几张小图的形式排列&#xff0c;并使用js代码实现点击小图显示大图。效果如下所示 html代码部分&#xff1a; <div class"img_bd"> <img src"…

linux0.12-8-7-signal.c

[334页] (-:这一小节很难理解。但我基本都理解了&#xff0c;哈哈。 1、为什么signal不可靠&#xff0c;而sigaction可靠&#xff1b; 2、 为什么系统调用会被打断&#xff1f; 3、 sys_signal&#xff0c;sys_sigaction&#xff0c;函数作用&#xff1f; 4、 do_signal&#x…

IDEA中java文件出现黄色的J文件同时maven项目导入了依赖但是idea依赖加不进去的问题记录

IDEA导入项目后依赖jar包没有显示 报错提示尝试的解决方法检查对应的sdkmodule等配置信息开始尝试是不是版本问题&#xff0c;因为对上述maven报错进行查询&#xff0c;好像是因为版本太高导致的&#xff0c;开始下一个低版本进行尝试切换版本即可解决 总结后续出现的BUG 此次环…

【C++的类与对象(下)】

目录 一、细说构造函数1.1初始化列表的引入1.2初始化列表1.2关键字explicit 二、static成员2.1static成员的特性2.2题目&#xff1a;实现一个类&#xff0c;计算程序中创建出了多少个类对象2.3题目&#xff1a;设计一个类 只能再栈上或者堆上创建 一、细说构造函数 1.1初始化列…

buuctf8

目录 crypto 摩丝 password 变异凯撒 Quoted-printable Rabbit web [护网杯 2018]easy_tornado [HCTF 2018]admin misc 被劫持的神秘礼物​编辑 crypto 摩丝 下载文件&#xff0c;得到一串摩斯密码 在线解码 password 下载文件 张三英文zs&#xff0c;加上生日&a…

【语义分割】标注工具ISAT with segment anything介绍

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 极速分割标注工具 1. 正文 1.1 安装 创建虚拟环境 conda create -n ISAT_with_segment_anything python3.8 conda activate ISAT_with_segment_anyt…

前端011_标签模块_列表功能

标签模块_列表功能 1、需求分析2、Mock添加数据列表模拟接口3、Api调用接口4、列表模版5、分页查询实现1、需求分析 标签模块主要文章标签进行管理,类别和标签的关系是一对多,一个类别下面存在多个标签。 首先开发模块中的列表功能,包含数据列表、分页。 2、Mock添加数据…

记录--前端实现点击选词功能

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 今天有一个需求&#xff0c;点击选中某个英文单词&#xff0c;然后对这个单词做一些处理&#xff0c;例如高亮背景、查看一些详细信息等等&#xff0c;今天简单实现了一下&#xff0c;效果如下&#x…

性能测试的核心原理

性能测试的核心原理 1 基于协议&#xff0c;前后端交互机制&#xff0c;性能核心。基于界面决定和前端用户交互&#xff0c;基于代码决定了后端。 1 网络分布式架构。 2 单机应用&#xff0c;比如安安兔&#xff0c;鲁大师。主要判断io读写&#xff0c;以及对资源的消耗。 2 多…

搭建本地仓库源

一、如何搭建仓库源 之前讲了定制ISO的方法&#xff1a;使用chroot定制系统&#xff0c;但有时候我们想自定义的安装包不在上游的仓库源中&#xff0c;在我们本地应该怎么办呢&#xff1f;如果我们将deb包拷贝到iso目录再安装有点过于麻烦了&#xff0c;而且还可能需要手动处理…

GPT-4的免费使用方法分享

目录 方法1&#xff1a;使用Ora.sh的LLM应用 方法2&#xff1a;使用https://steamship.com 方法3&#xff1a;使用https://nat.dev 方法4&#xff1a;http://tdchat.vip 方法5&#xff1a;使用Poe网站或App 方法6&#xff1a;使用 Opencat App 方法7:使用https://Huggin…

基于git的开发规范总结

文章目录 各分支命名规范gitee基本开发流程及定义gitflow工作流gitflow工作流常用分支主要工作流程命名规则gitflow工作流程图 Git分支开发管理策略主分支Master开发分支DevelopGit创建Develop分支的命令&#xff1a;将Develop分支发布到Master分支的命令&#xff1a; 临时性分…

潍坊这一城市商业综合体有奖征名

云创金谷项目商业购物中心名称及IP形象征集开始啦&#xff01;&#xff01;你有什么好想法&#xff1f;快来参与吧&#xff01;&#xff01; 云创金谷&#xff0c;是奎文区重点打造的城市更新代表力作&#xff0c;位于文化路以东、新华路以西&#xff0c;北宫街以北、卧龙东街以…

前端开发代码规范工具

规范化是前端工程化的一个重要部分。现在&#xff0c;有许多工具能够辅助我们实行代码的规范化,比如你一定知道的 ESLint 和 Prettier。 今天&#xff0c;来聊聊这些工具的工作原理和基本使用&#xff0c;了解它们是如何发挥作用的&#xff0c;以及如何更好地利用这些工具去规…

Nginx介绍

文章目录 Nginx介绍与apahche区别联系反向代理负载均衡动静分离 Docker安装nginx拉取镜像配置nginx测试nginxNginx配置详解 Nginx介绍 Nginx (“engine x”)是一个高性能的HTTP和反向代理服务器&#xff0c;特点是占有内存少&#xff0c;并发能力强&#xff0c;事实上Nginx的并…

Linux权限划分的原则

考察的不仅是一个具体的指令&#xff0c;还考察对技术层面的认知。 如果对 Linux 权限有较深的认知和理解&#xff0c;那么完全可以通过查资料去完成具体指令的执行。更重要的是&#xff0c;认知清晰的程序员可以把 Linux 权限管理的知识迁移到其他的系统设计中。 权限抽象 一…

LeetCode之回溯算法

文章目录 思想&框架1.组合/子集和排列问题2.组合应用问题 组合/子集问题1. lc77 组合2. lc216 组合总和III3. lc39 组合总和4. lc40 组合总和II5. lc78 子集6. lc90 子集II 排列1. 全排列I2. 全排列II 组合问题的应用1.lc17 电话号码的字母组合2.lc131 分割回文串3. lc19 复…

《编程思维与实践》1070.复数幂

《编程思维与实践》1070.复数幂 题目 思路 思路比较简单,就是细节比较繁琐: ( a b i ) ( c d i ) ( a c − b d ) ( a d b c ) i (abi)(cdi)(ac-bd)(adbc)i (abi)(cdi)(ac−bd)(adbc)i , 利用该公式分实部和虚部进行计算结果即可. 由于涉及加减和正负号,所以在大整数结构…

致力于中小企业JavaEE企业级快速开发平台、后台框架平台

一、开源项目简介 J2eeFAST 是一个 Java EE 企业级快速开发平台&#xff0c; 致力于打造中小企业最好用的开源免费的后台框架平台 。系统基于&#xff08;Spring Boot、Spring MVC、Apache Shiro、MyBatis-Plus、Freemarker、Bootstrap、AdminLTE&#xff09;经典技术开发&…