vue原理分析(八)研究new Vue()中的initProxy

在Vue.prototype._init 中有一些init函数,今天我们来研究这些init函数

Vue.prototype._init = function (options) {......{initProxy(vm);}......initLifecycle(vm);initEvents(vm);initRender(vm);callHook$1(vm, 'beforeCreate', undefined, false /* setContext */);initInjections(vm); // resolve injections before data/propsinitState(vm);initProvide(vm); // resolve provide after data/propscallHook$1(vm, 'created');......
}

接下来我们逐步分析,先分析initProxy(vm)

Vue.prototype._init = function (options) {......{initProxy(vm);}......
}

查看initProxy源码

initProxy = function initProxy(vm) {if (hasProxy) {// determine which proxy handler to useconst options = vm.$options;const handlers = options.render && options.render._withStripped ? getHandler : hasHandler;vm._renderProxy = new Proxy(vm, handlers);}else {vm._renderProxy = vm;}
};

通过判断hasProxy,来执行不同的处理逻辑

我们看下hasProxy的源码

const hasProxy = typeof Proxy !== 'undefined' && isNative(Proxy);

它的作用就是判断当前环境中Proxy是否可用

// determine which proxy handler to use
const options = vm.$options;
const handlers = options.render && options.render._withStripped ? getHandler : hasHandler;

回到代码中,如果当前环境存在Proxy,则执行块内的语句

三元表达式,如果options上存在render属性,且render属性上存在_withStripped属性,则proxy的traps(traps其实也就是自定义方法)采用getHandler方法,否则采用hasHandler方法

接下来看看getHandler和hasHandler方法

const getHandler = {get(target, key) {if (typeof key === 'string' && !(key in target)) {if (key in target.$data)warnReservedPrefix(target, key);elsewarnNonPresent(target, key);}return target[key];}
};
const hasHandler = {has(target, key) {const has = key in target;const isAllowed = allowedGlobals(key) ||(typeof key === 'string' &&key.charAt(0) === '_' &&!(key in target.$data));if (!has && !isAllowed) {if (key in target.$data)warnReservedPrefix(target, key);elsewarnNonPresent(target, key);}return has || !isAllowed;}
};

getHandler方法主要是针对读取代理对象的某个属性时进行的操作。当访问的属性不是string类型或者属性值在被代理的对象上不存在,则抛出错误提示,否则就返回该属性值

hasHandler方法的应用场景在于查看vm实例是否拥有某个属性—比如调用for in循环遍历vm实例属性时,会触发hasHandler方法。

回到initProxy代码中

if (hasProxy) {...vm._renderProxy = new Proxy(vm, handlers)} else {vm._renderProxy = vm}
}

如果Proxy属性存在,则把包装后的vm属性赋值给_renderProxy属性值,否则把vm是实例本身赋值给_renderProxy属性。

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

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

相关文章

【C/C++】“秒懂”学C/C++不可错过的“经典编程题” — 日期类的经典运用 (含题链接)

“秒懂”学C/C不可错过的“经典编程题” — 日期类的经典运用 (含题链接) 1. 计算日期到天数转换(1). 解题思路:(2). 代码实现: 2. 打印日期(1). 解题思路:(2). 代码实现: 3. 日期累加(1). 解题思路:(2). 代…

JS笔记

9.7 1.流程控制 1.1.for..in..循环 1.for...in 语句用来遍历对象的每一个属性。每次都将属性名作为字符串保存在变量里 2.在无法预知对象的任何信息,和循环次数的时候使用 书写格式如下 for (变量 in 对象) {代码段 } 1.2.whil语句 while 循环会在指定条件…

顶点照明渲染路径

1. 顶点照明渲染路径处理光照的方式 基本思想就是所有的光都按照逐顶点的方式进行计算的,在内置渲染管线中,它只会最多记录8个光源的数据,只会将光相关的数据填充到那些逐顶点相关的内置光源变量 顶点照明渲染路径仅仅是前向渲染路径的一个…

【数据结构】希尔排序(缩小增量排序)

目录 一、基本思想 1.1 引入希尔排序的原因 1.2 基本思想 二、思路分析 三、gap分组问题 四、代码实现 4.1 代码一(升序) 4.2 代码二(升序) 五、易错提醒 六、时间复杂度分析 七、排序小tips 一、基本思想 1.1 引入希尔…

【即时通讯】轮询方式实现

技术栈 LayUI、jQuery实现前端效果。django4.2、django-ninja实现后端接口。 代码仓 - 后端 代码仓 - 前端 实现功能 首次访问页面并发送消息时需要设置昵称发送内容为空时要提示用户不能发送空消息前端定时获取消息,然后展示在页面上。 效果展示 首次发送需要…

【老课推荐】基于LangChain和知识图谱的大模型医疗问答机器人项目

在当今数据驱动和人工智能主导的时代,大模型和知识图谱的结合是一个重要的研究和应用方向。大模型实战课程通过48课时,分为六个主要章节,涵盖了从基本概念到高级应用的多方面内容。学员将通过本课程学习如何使用LangChain和OpenAI进行开发&am…

windows10-VMware17-Ubuntu-22.04-海康2K摄像头兼容问题,求解(已解决)

文章目录 1.webrtc camera测试2.ffmpeg 测试3.Ubuntu 自带相机4.解决办法 环境:windows10系统下,VMware的Ubuntu-22.04系统 问题:摄像头出现兼容问题,本来是想开发测试的,Ubuntu方便些。买了海康2K的USB摄像头&#xf…

自动驾驶ADAS算法--使用MATLBA和UE4生成测试视频

原文参考:金书世界 环境搭建参考:用MATLAB2020b和虚拟引擎(Unreal Engine)联合仿真输出AVM全景测试视频----Matlab环境搭建 matlab参考: https://ww2.mathworks.cn/help/driving/ug/simulate-a-simple-driving-sce…

【Transformer】Positional Encoding

文章目录 为什么需要位置编码?预备知识三角函数求和公式旋转矩阵逆时针旋转顺时针旋转旋转矩阵的性质 原始Transformer中的位置编码论文中的介绍具体计算过程为什么是线性变换? 大模型常用的旋转位置编码RoPE基本原理最简实现形式Llama3中的代码实现 两种…

TP5队列和TP5 使用redis 等相关

TP5.thinkphp之门面(facade类)面试_thinkphp facade-CSDN博客 TP5中的消息队列_tp 5.0 队列 release 时间单位-CSDN博客 thinkphp-queue自带的队列包使用分析_php think queue:listen-CSDN博客TP5 使用redis_tp5 redis-CSDN博客

智汇云舟受邀参加2024第四届国产水科学数值模型开发创新与技术应用研讨会,并成为“科技智水产业联盟”创始成员

在数字化浪潮的推动下,智慧水利作为国家战略的重要组成部分,正迎来前所未有的发展机遇。8月27-29日,由浙江贵仁信息科技股份有限公司主办、浙江省水利学会协办的“2024第四届国产水科学数值模型开发创新与技术应用研讨会”在杭州白马湖建国饭…

ML19_GMM高斯混合模型详解

1. 中心极限定理 中心极限定理(Central Limit Theorem, CLT)是概率论中的一个重要定理,它描述了在一定条件下,独立同分布的随机变量序列的标准化和的分布趋向于正态分布的性质。这个定理在统计学中有着广泛的应用,尤其…

maven配置文件常用模板

注释很详细&#xff0c;直接上代码 项目结构 内容 父项目 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi…

context canceled 到底谁在作祟?

一、背景 在工作中&#xff0c;因报警治理标准提高&#xff0c;在报警治理的过程中&#xff0c;有一类context cancel报警渐渐凸显出来。 目前context cancel日志报警大致可以分为两类。 context deadline exceeded 耗时长有明确报错原因 context canceled 耗时短无明确报错…

相机光学(三十六)——光圈

0.参考链接 &#xff08;1&#xff09;Hall光圈和Piris光圈的区别 &#xff08;2&#xff09;自动光圈及P-IRIS原理 1.光圈分类 Hall光圈和Piris光圈是两种不同的光圈技术。它们之间的区别如下&#xff1a; Hall光圈&#xff1a;Hall光圈是一种传统的光电子元件&#xff0c;通…

Robot Operating System——四元数

大纲 应用场景1. 机器人姿态控制场景描述具体应用 2. 机器人导航与定位场景描述具体应用 3. 机器人仿真场景描述具体应用 4. 机器人传感器数据处理场景描述具体应用 5. 机器人操作与控制场景描述具体应用 定义字段解释 案例 geometry_msgs::msg::Quaternion 是 ROS 2 中的一个消…

tensorflow-MLP python入门

目录 创建模型 热编码 keras 模型 模型测试 创建数据集 建立模型 测试 创建模型 """ model tf.keras.models.Sequential([ tf.keras.layers.Dense(10, activationtf.nn.relu, input_dim1), tf.keras.layers.Dense(10, activationtf.nn.relu), tf.…

Android13_SystemUI下拉框新增音量控制条

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 Android13_SystemUI下拉框新增音量控制条 一、必备知识二、源码分析对比1.brightness模块分析对比2.statusbar/phone 对应模块对比对比初始化类声明对比构造方法 三、源码修改…

OpenCV结构分析与形状描述符(11)椭圆拟合函数fitEllipse()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 围绕一组2D点拟合一个椭圆。 该函数计算出一个椭圆&#xff0c;该椭圆在最小二乘意义上最好地拟合一组2D点。它返回一个内切椭圆的旋转矩形。使…

ffmpeg使用安装使用教程(命令行-Python)

安装教程 https://blog.csdn.net/yuanmomoya/article/details/141992114 ffmpeg转换操作视频十分的占用cpu&#xff0c;会把cpu打满&#xff0c;线上使用的话需要注意下 命令行操作 一、视频转码 将视频从一种格式转换为另一种格式&#xff1a; ffmpeg -i input_video.mp4 o…