Vue2源码梳理：关于vm.$mount的实现

$mount

  • vue实例挂载的实现，也就是执行 vm.$mount 的方法

  • 在 Runtime + Compiler 版本，入口文件是: src/platform/web/entry-runtime-with-compiler.js

  • $mount 方法也是在这个文件中被定义的

    const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (el?: string | Element,hydrating?: boolean
): Component {// 首先对于传入的这个 el 参数，做了一个处理，可以看到 el 参数，可以是个字符串，也可以是个 Element// 这里调用了query方法，query方法实际上就是原生的方法，有则document.querySelector，无则，document.createElement 返回一个div 等处理el = el && query(el)// 拿到这个 el 以后，这里就已经被转化成了这个 dom 对象，然后它又做了一个简单的判断// 也就是说我的 el 如果是 body 或者是 html 标签的话，它就会报一个错// 就是 vue 不可以直接挂载到这个 body 或者 html 上，因为它是会覆盖的，你挂载的话，你会把整个body覆盖，那整个HTML文档不对了// 所以说这里在开发环境下，就报了这个警告/* istanbul ignore if */if (el === document.body || el === document.documentElement) {process.env.NODE_ENV !== 'production' && warn(`Do not mount Vue to <html> or <body> - mount to normal elements instead.`)return this}// 拿到这个options。判断有没有定义render方法，因为平时开发的过程中，代码都是脚手架生成，会有一个 renderconst options = this.$options// resolve template/el and convert to render functionif (!options.render) {// 再次判断你有没有写template，一般模板默认是有index.html的，在组件内部也可以使用 template, 有则进行处理let template = options.templateif (template) {if (typeof template === 'string') {if (template.charAt(0) === '#') {template = idToTemplate(template)/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && !template) {warn(`Template element not found or is empty: ${options.template}`,this)}}} else if (template.nodeType) {template = template.innerHTML} else {if (process.env.NODE_ENV !== 'production') {warn('invalid template option:' + template, this)}return this}} else if (el) {// 如果没有 templete 则执行 getOuterHTML 拿到htmltemplate = getOuterHTML(el)}if (template) {/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile')}// 这一块就是跟编译相关了, 编译的话，它其实是调用这个 compileToFunction// 拿到生成的一个 render 函数，还有 staticRenderFnsconst { render, staticRenderFns } = compileToFunctions(template, {outputSourceRange: process.env.NODE_ENV !== 'production',shouldDecodeNewlines,shouldDecodeNewlinesForHref,delimiters: options.delimiters,comments: options.comments}, this)// 这个 options.render 会在渲染 vnode 的时候会用到options.render = renderoptions.staticRenderFns = staticRenderFns/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile end')measure(`vue ${this._name} compile`, 'compile', 'compile end')}}}// 调用 mount, 这个mount 是 runtimeOnly 时的 $mountreturn mount.call(this, el, hydrating)
}

  • 它首先获得了 Vue.prototype.$mount 方法，用这个 mount 变量缓存起来，然后又重新定义了一遍这个方法

  • 回到最初的定义，在 src/platforms/web/runtime/index.js 中，是最原始的定义

    // public mount method
Vue.prototype.$mount = function (el?: string | Element,hydrating?: boolean
): Component {el = el && inBrowser ? query(el) : undefinedreturn mountComponent(this, el, hydrating)
}// devtools global hook
/* istanbul ignore next */
if (inBrowser) {setTimeout(() => {if (config.devtools) {if (devtools) {devtools.emit('init', Vue)} else if (process.env.NODE_ENV !== 'production' &&process.env.NODE_ENV !== 'test') {console[console.info ? 'info' : 'log']('Download the Vue Devtools extension for a better development experience:\n' +'https://github.com/vuejs/vue-devtools')}}if (process.env.NODE_ENV !== 'production' &&process.env.NODE_ENV !== 'test' &&config.productionTip !== false &&typeof console !== 'undefined') {console[console.info ? 'info' : 'log'](`You are running Vue in development mode.\n` +`Make sure to turn on production mode when deploying for production.\n` +`See more tips at https://vuejs.org/guide/deployment.html`)}}, 0)
}

  • 在我们的这个入口, 为什么会重新定义一遍 $mount？

  • 实际上, 上面这块最原始的代码是给 RuntimeOnly 版本复用用的一个函数

  • 在 Runtime + Compiler 版本，在 src/core/instance/init.js 的 initMixin 中

  • 执行 vm.$mount 时候，实际上调的就是 src/platform/web/entry-runtime-with-compiler.js 这个入口文件

  • 中的 Vue.prototype.$mount 这个函数，现在回到入口文件中的代码中，查看相关代码上的注释

  • 在执行了入口文件中的 .$mount, 最终调用了 RuntimeOnly 的 $mount, 最终执行 mountComponent 方法

  • 而 mountComponent 是在 src/core/instance/lifecycle.js 中定义的

    export function mountComponent (vm: Component,el: ?Element,hydrating?: boolean
): Component {// 首先会把这个 el 的dom 被 vm.$el 缓存起来vm.$el = el// 判断有没有 render 函数(或没有 template转换来的 render), 没有则创建一个空的 vnode, 并在开发环境警告if (!vm.$options.render) {vm.$options.render = createEmptyVNode// 这个警告就是写了 template，但是没有使用含有编译的版本，或者两者都没有写if (process.env.NODE_ENV !== 'production') {/* istanbul ignore if */if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||vm.$options.el || el) {warn('You are using the runtime-only build of Vue where the template ' +'compiler is not available. Either pre-compile the templates into ' +'render functions, or use the compiler-included build.',vm)} else {warn('Failed to mount component: template or render function not defined.',vm)}}}// 这里先执行 beforeMount 的钩子函数，跳过callHook(vm, 'beforeMount')let updateComponent// 在dev环境上是更多做了性能埋点相关的处理，当性能比较卡顿时，可以利用这些东西，看文档就行，跳过/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && config.performance && mark) {updateComponent = () => {const name = vm._nameconst id = vm._uidconst startTag = `vue-perf-start:${id}`const endTag = `vue-perf-end:${id}`mark(startTag)const vnode = vm._render()mark(endTag)measure(`vue ${name} render`, startTag, endTag)mark(startTag)vm._update(vnode, hydrating)mark(endTag)measure(`vue ${name} patch`, startTag, endTag)}} else {// 这里才是我们需要关注的updateComponent = () => {vm._update(vm._render(), hydrating)}}// 这个函数就是调用了 vm._update，第一个参数是通过 vm._render渲染出来一个vnode, 第二个参数理解为 false 就可以了// 之后，调用 new Watcher 这里实际上是 渲染 watcher// 因为 watcher 这个东西其实是跟响应式原理强相关的一个类// 它实际上就是一个观察者模式，它其实有很多自定义 watcher，也会有一个叫渲染 watcher// 调用 new Watcher 的的时候，三个参数，第一个vm, 第二个 updateComponent函数, 第三个 noop(空函数), 第四个配置对象，第五个布尔值// we set this to vm._watcher inside the watcher's constructor// since the watcher's initial patch may call $forceUpdate (e.g. inside child// component's mounted hook), which relies on vm._watcher being already definednew Watcher(vm, updateComponent, noop, {before () {if (vm._isMounted && !vm._isDestroyed) {callHook(vm, 'beforeUpdate')}}}, true /* isRenderWatcher */) // 注意这里第5个参数是 true, 表示是一个渲染watcherhydrating = false// manually mounted instance, call mounted on self// mounted is called for render-created child components in its inserted hookif (vm.$vnode == null) {vm._isMounted = truecallHook(vm, 'mounted')}return vm
}
    • 进入 Watcher 的定义，在 src/core/observer/watcher.js 中
      /*** A watcher parses an expression, collects dependencies,
* and fires callback when the expression value changes.
* This is used for both the $watch() api and directives.
*/
export default class Watcher {vm: Component;expression: string;cb: Function;id: number;deep: boolean;user: boolean;lazy: boolean;sync: boolean;dirty: boolean;active: boolean;deps: Array<Dep>;newDeps: Array<Dep>;depIds: SimpleSet;newDepIds: SimpleSet;before: ?Function;getter: Function;value: any;constructor (vm: Component,expOrFn: string | Function,cb: Function,options?: ?Object,isRenderWatcher?: boolean // 是否是渲染 watcher) {this.vm = vmif (isRenderWatcher) {vm._watcher = this}vm._watchers.push(this) // 收集watcher// 这里忽略这个options// optionsif (options) {this.deep = !!options.deepthis.user = !!options.userthis.lazy = !!options.lazythis.sync = !!options.syncthis.before = options.before} else {this.deep = this.user = this.lazy = this.sync = false}this.cb = cbthis.id = ++uid // uid for batchingthis.active = truethis.dirty = this.lazy // for lazy watchersthis.deps = []this.newDeps = []this.depIds = new Set()this.newDepIds = new Set()this.expression = process.env.NODE_ENV !== 'production'? expOrFn.toString(): ''// 注意这里，这里就是调用方传进来的 updateComponent// parse expression for getterif (typeof expOrFn === 'function') {this.getter = expOrFn} else {this.getter = parsePath(expOrFn)if (!this.getter) {this.getter = noopprocess.env.NODE_ENV !== 'production' && warn(`Failed watching path: "${expOrFn}" ` +'Watcher only accepts simple dot-delimited paths. ' +'For full control, use a function instead.',vm)}}this.value = this.lazy? undefined: this.get()}// 这里有依赖收集，相关的/*** Evaluate the getter, and re-collect dependencies.*/get () {pushTarget(this)let valueconst vm = this.vmtry {value = this.getter.call(vm, vm) // 这里会调用 getter, 也就是上层调用方传进来的 updateComponent 方法，就会执行方法内部的 update} catch (e) {if (this.user) {handleError(e, vm, `getter for watcher "${this.expression}"`)} else {throw e}} finally {// "touch" every property so they are all tracked as// dependencies for deep watchingif (this.deep) {traverse(value)}popTarget()this.cleanupDeps()}return value}/*** Add a dependency to this directive.*/addDep (dep: Dep) {const id = dep.idif (!this.newDepIds.has(id)) {this.newDepIds.add(id)this.newDeps.push(dep)if (!this.depIds.has(id)) {dep.addSub(this)}}}/*** Clean up for dependency collection.*/cleanupDeps () {let i = this.deps.lengthwhile (i--) {const dep = this.deps[i]if (!this.newDepIds.has(dep.id)) {dep.removeSub(this)}}let tmp = this.depIdsthis.depIds = this.newDepIdsthis.newDepIds = tmpthis.newDepIds.clear()tmp = this.depsthis.deps = this.newDepsthis.newDeps = tmpthis.newDeps.length = 0}/*** Subscriber interface.* Will be called when a dependency changes.*/update () {/* istanbul ignore else */if (this.lazy) {this.dirty = true} else if (this.sync) {this.run()} else {queueWatcher(this)}}/*** Scheduler job interface.* Will be called by the scheduler.*/run () {if (this.active) {const value = this.get()if (value !== this.value ||// Deep watchers and watchers on Object/Arrays should fire even// when the value is the same, because the value may// have mutated.isObject(value) ||this.deep) {// set new valueconst oldValue = this.valuethis.value = valueif (this.user) {const info = `callback for watcher "${this.expression}"`invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info)} else {this.cb.call(this.vm, value, oldValue)}}}}/*** Evaluate the value of the watcher.* This only gets called for lazy watchers.*/evaluate () {this.value = this.get()this.dirty = false}/*** Depend on all deps collected by this watcher.*/depend () {let i = this.deps.lengthwhile (i--) {this.deps[i].depend()}}/*** Remove self from all dependencies' subscriber list.*/teardown () {if (this.active) {// remove self from vm's watcher list// this is a somewhat expensive operation so we skip it// if the vm is being destroyed.if (!this.vm._isBeingDestroyed) {remove(this.vm._watchers, this)}let i = this.deps.lengthwhile (i--) {this.deps[i].removeSub(this)}this.active = false}}
}

总结下 $mount

  • 1 ) 在含有 compiler 版本中，先对 el 做一些处理
  • 2 ) 在没有定义 render 函数的时候，尝试获取一下 render 函数
    • 也就是说，把整个template通过一系列的逻辑判断，也是因为它支持很多很多种写法
      • 可以直接写 template
      • 也可以直接 template 是个dom对象
      • 如果不写 templete 的话，通过 el 的 outHTML 来获取这个 templete
    • 把这个template 通过这个编译的手段也转化成这个render函数
    • 也就是说整个 $mount 在这个带compiler版本的前提，要拿到这个render函数
  • 3 ) 然后就会调用这个 mountComponent 的这个方法
    • 这个方法其实很简单，就是定义了 updateComponent 这个函数
  • 4 ) 这个函数它实际上被用到渲染 watcher 里面，为什么要通过 watcher 呢？
    • 是因为这个 updateComponent 这个方法，实际上执行了一次真实的渲染
    • 这个渲染过程，除了我们首次，之后再更新数据的时候，还是会触发这个渲染watcher
    • 再次执行这个updateComponent方法，它是一个监听到执行的这样一个过程
    • 当我们的数据发生变化，它的更新入口也是这个 updateComponent 方法
    • 这就是渲染 watcher所要做的事情

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

acszcda

acszcda

学习目标&#xff1a; 提示&#xff1a;这里可以添加学习目标 例如&#xff1a; 一周掌握 Java 入门知识 学习内容&#xff1a; 提示&#xff1a;这里可以添加要学的内容 例如&#xff1a; 搭建 Java 开发环境掌握 Java 基本语法掌握条件语句掌握循环语句 学习时间&#x…
阅读更多...
C# 使用Naudio库实现声卡采集麦克风采集+混音

C# 使用Naudio库实现声卡采集麦克风采集+混音

C# 使用Naudio库实现声卡采集麦克风采集混音 using NAudio.Wave; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using System.Linq; using System.Text; using System.Threadin…
阅读更多...
TCP高频知识点

TCP高频知识点

本篇文章主要讲述一下在面试过程中TCP的高频知识点 1.TCP三次握手流程图: 客户端发送一个SYN&#xff08;同步&#xff09;报文段给服务器&#xff0c;选择一个初始序列号&#xff0c;并设置SYN标志位为1。服务器接收到客户端的SYN报文段后&#xff0c;回复一个ACK&#xff08…
阅读更多...
OJ刷题：杨氏矩阵【建议收藏】

OJ刷题：杨氏矩阵【建议收藏】

看见这个题目&#xff0c;很多人的第一反应是遍历整个数组查找数字&#xff0c;但是这种方法不仅效率低&#xff0c;而且远远不能满足题目要求。下面介绍一种高效的查找方法&#xff1a; 代码实现&#xff1a; #include <stdio.h>int Yang_Find_Num(int arr[][3], int …
阅读更多...
steam游戏搬砖项目靠谱吗？有没有风险？

steam游戏搬砖项目靠谱吗？有没有风险？

作为一款fps射击游戏&#xff0c;csgo在近几年可谓是火出圈&#xff0c;作为一款全球竞技游戏&#xff0c;深受玩家喜爱追捧&#xff0c;玩家追求的就是公平公正&#xff0c;各凭本事&#xff0c;像其他游戏可能还会有皮肤等装备属性加成&#xff0c;在csgo里面是不存在的。 纯…
阅读更多...
K8sGPT 的使用

K8sGPT 的使用

K8sGPT 介绍 k8sgpt 是一个扫描 Kubernetes 集群、诊断和分类问题的工具。它将 SRE 经验编入其分析器中&#xff0c;并帮助提取最相关的信息&#xff0c;通过人工智能来丰富它。它还可以与 OpenAI、Azure、Cohere、Amazon Bedrock 和本地模型结合使用。 K8sGPT Github 地址 …
阅读更多...
C++Linux网络编程：简单的select模型运用

C++Linux网络编程：简单的select模型运用

文章目录 前言源代码部分重点解读read/write与recv/send在使用上的差异 前言 这段代码来自于游双的《Linux高性能服务器编程》&#xff0c;在Ubuntu中对代码进行了实现&#xff0c;并在注释部分加上了我的个人解读。 源代码 // #include <sys/types.h> // 网络通讯的核…
阅读更多...
JavaScript 设计模式之代理模式

JavaScript 设计模式之代理模式

代理模式 其实这种模式在现在很多地方也都有使用到&#xff0c;如 Vue3 中的数据相应原理就是使用的 es6 中的 Proxy 代理及 Reflect 反射的方式来处理数据响应式 我们日常在使用数据请求时&#xff0c;也会用到一些代理的方式&#xff0c;比如在请求不同的域名&#xff0c;端…
阅读更多...
C++ 广度优先搜索的标记策略（五十六）【第三篇】

C++ 广度优先搜索的标记策略（五十六）【第三篇】

今天我们来看看bfs是如何规划标记策略的。 1.标记策略 但先等一下&#xff0c;先看一道题《一维坐标的移动》 在一个长度为 n 的坐标轴上&#xff0c;蒜头君想从 A 点 移动到 B 点。他的移动规则如下&#xff1a; 向前一步&#xff0c;坐标增加 1。 向后一步&#xff0c;坐…
阅读更多...
Vue插槽

Vue插槽

Vue插槽 一、插槽-默认插槽1.作用2.需求3.问题4.插槽的基本语法5.代码示例6.总结 二、插槽-后备内容&#xff08;默认值&#xff09;1.问题2.插槽的后备内容3.语法4.效果5.代码示例 三、插槽-具名插槽1.需求2.具名插槽语法3.v-slot的简写4.代码示例5.总结 四、作用域插槽1.插槽…
阅读更多...
安卓价值1-如何在电脑上运行ADB

安卓价值1-如何在电脑上运行ADB

ADB&#xff08;Android Debug Bridge&#xff09;是Android平台的调试工具&#xff0c;它是一个命令行工具&#xff0c;用于与连接到计算机的Android设备进行通信和控制。ADB提供了一系列命令&#xff0c;允许开发人员执行各种操作&#xff0c;包括但不限于&#xff1a; 1. 安…
阅读更多...
不关电脑不仅仅是因为懒

不关电脑不仅仅是因为懒

程序员为什么不喜欢关电脑&#xff1f;不管用台式机&#xff0c;还是笔记本&#xff0c;总有一批程序员下班后从不关闭电脑&#xff0c;台式机按掉屏幕电源&#xff0c;笔记本直接合上休眠就是了。 这种现象说明这些程序员懒吗&#xff1f;还是有其它原因&#xff1f;从我自身的…
阅读更多...
【网络层介绍】

【网络层介绍】

文章目录 一、网络层概述1. 网络层的作用2. 网络层与其他层的关系 二、核心协议和技术1. IP协议2. 路由和转发3. 子网划分和超网 三、网络层设备1. 路由器2. 三层交换机 一、网络层概述 1. 网络层的作用 网络层主要负责在不同网络间传输数据包&#xff0c;确保数据能够跨越多…
阅读更多...
在python中JSON数据格式的使用

在python中JSON数据格式的使用

什么是JSON&#xff1f; JSON是一种数据格式&#xff0c;由美国程序设计师DouglasCrockford创建的&#xff0c;JSON全名是JavaScript Object Notation,由JSON英文全文字义我们可以推敲JSON的缘由&#xff0c;最初是为JavaScript开发的。这种数据格式由于简单好用被大量应用在We…
阅读更多...
Rust Option类型详解

Rust Option类型详解

在Rust中&#xff0c;Option是一种枚举类型&#xff0c;用于表示一个可能有值&#xff0c;也可能为空&#xff08;None&#xff09;的情况。它是Rust中对于空值安全处理的一种方式&#xff0c;与其他语言中的null或undefined相比&#xff0c;Option提供了更安全、更明确的方式来…
阅读更多...
DS Wannabe之5-AM Project: DS 30day int prep day15

DS Wannabe之5-AM Project: DS 30day int prep day15

Q1. What is Autoencoder? 自编码器是什么&#xff1f; 自编码器是一种特殊类型的神经网络&#xff0c;它通过无监督学习尝试复现其输入数据。它通常包含两部分&#xff1a;编码器和解码器。编码器压缩输入数据成为一个低维度的中间表示&#xff0c;解码器则从这个中间表示重…
阅读更多...
数据库被人破解，删除数据，勒索

数据库被人破解，删除数据，勒索

事情是这样的&#xff0c;我买了一台服务器自己部署项目玩儿玩儿&#xff0c;我的数据库运行在3306端口&#xff0c;密码没改&#xff0c;就是默认的123456&#xff0c;诡异的事情发生了&#xff0c;用了一段时间之后&#xff0c;数据库突然连接不上了&#xff0c;我一通操作猛…
阅读更多...
Python爬虫——解析库安装（1）

Python爬虫——解析库安装（1）

目录 1.lxml安装2.Beautiful Soup安装3.pyquery 的安装 我创建了一个社区&#xff0c;欢迎大家一起学习交流。社区名称&#xff1a;Spider学习交流 注&#xff1a;该系列教程已经默认用户安装了Pycharm和Anaconda&#xff0c;未安装的可以参考我之前的博客有将如何安装。同时默…
阅读更多...
中科星图GVE（AI案例）——AI影像进行超分案例

中科星图GVE（AI案例）——AI影像进行超分案例

简介 超分辨率图像处理是一种通过增加图像的空间分辨率来提高图像质量的技术。传统的超分辨率算法主要基于插值和滤波方法，然而这些方法往往无法准确恢复丢失的高频细节，导致图像出现模糊或失真。近年来，基于人工智能的超分辨率算法得到了广泛的关注和研究。下面将介绍AI影…
阅读更多...
【开源】SpringBoot框架开发企业项目合同信息系统

【开源】SpringBoot框架开发企业项目合同信息系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 合同审批模块2.3 合同签订模块2.4 合同预警模块2.5 数据可视化模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 合同审批表3.2.2 合同签订表3.2.3 合同预警表 四、系统展示五、核心代码5.1 查询合同…
阅读更多...
最新文章

Copyright @ 2022~2023