Vue与VueComponent的内置关系

news2024/12/24 8:13:37

        上一节讲到了 Vue.extend 与 VueComponent 的区别,这一节讲一讲 Vue 与 VueComponent的内置关系。

原型与原型链

 这里需要用到原型与原型链中的知识点,具体文章链接在这里。js中的原型与原型链

这里只需要理解一个点,那就是构造函数的prototype 属性(显式原型属性) === 实例对象的 __proto__属性(隐式原型属性),注意,这里只针对属性,至于属性所指向的原型对象,都是同一个。

function Demo() { }
const d = new Demo()
console.log(Demo.prototype)  // 显式原型属性
console.log(d.__proto__)     // 隐式原型属性
console.log(Demo.prototype === d.__proto__)  // true

 Vue.prototype === VueComponent.prototype.__proto__

 了解了原型与原型链之后,我们就可以来看一下, Vue 与 VueComponent 之间的关系了。

Vue:构造函数

vm:通过 new Vue(option) 之后,得到的是 Vue的实例对象

VueComponent:也是构造函数,通过 Vue.extend(option) 之后,返回的 VueComponent函数

1、 Vue 构造函数里面有一堆东西,比如 cinfig 属性,注册全局组件的 component 属性等等。console.dir(Vue)即可查看。但是不说别的,肯定是有 prototype 显式原型属性的。拿到 Vue.prototype ,此时 Vue.prototype 指向的是 Vue构造函数的原型对象。

2、vm 就是 Vue 的实例对象,该对象上肯定存在一个 __proto__ 隐式原型属性。拿到 vm.__proto__ ,此时 vm.__proto__  指向的也是 构造函数Vue 的 原型对象。

3、验证一下就是 控制台输出 Vue.prototype === vm.__proto__  (true)

4、构造函数 Vue 的原型对象也是一个对象,也存在 __proto__ 属性,但是 Vue.prototype.__proto__ 指向的是 Object,而Object.__proto__指向的是 null

5、VueComponent 类比 Vue ,同样是构造函数,VueComponent .prototype 指向的是 VueComponent 构造函数的原型对象。

6、通过 注册组件之后应用,Vue 自动帮我们 使用 New VueComponent() 生成了一个实例对象,这里叫他vc,以便于后续操作。vc实例对象类比 vm,存在 __proto__ 属性,vc.__proto__ 属性指向的也是是 VueComponent 构造函数的原型对象。

7、验证一下就是 控制台输出 VueComponent .prototype === vc.__proto__  (true)

8、构造函数 VueComponent 的原型对象也是一个对象,也存在 __proto__ 属性,按理来说是 VueComponent .prototype.__proto__ 指向的同样是是 Object。但是 Vue 做了一个处理,让 VueComponent .prototype.__proto__ 强制性指向了 Vue.prototype。

也就是上面说的  VueComponent .prototype.__proto__ === Vue.prototype

之所以这样强制指向,是为了让组件实例对象( vc )能够访问到 Vue原型上的属性与方法。

因为 Vue 原型上的方法和属性,按理来说只能是 构造函数  Vue 的实例对象才能使用。组件实例对象vc是用不了的,因为这两搭不上边,但是强制指向之后,通过原型链访问,vc就能使用 Vue原型上的属性和方法了。

 

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

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

相关文章

【idea2022.3】安装教程2022-12

教程目录教程简介所需环境和版本软件下载执行过程安装激活开始使用前的配置结束语教程简介 换电脑了,又经历了一遍软件和环境的安装,已经安装好了jdk和对应版本的maven,所以接下来该安装idea等软件了 所需环境和版本 系统:win1…

软件测试人员30K的月薪,是个什么段位?

大家可以参照BAT等一线大厂的职级,一般是高级测试工程师和资深测试开发工程师的职位,下面是在字节跳动年薪40W的测试工程师 掌握的技能树主要包含哪个方面? 现在的行情,大家想要拿到30k这个薪资,不妨审视自己&#xf…

跨平台备份工具Duplicati

本文软件得到了网友 冷心 的推荐; 什么是 Duplicati ? Duplicati 是一个免费的开源备份客户端,可将加密的、增量的、压缩的备份安全地存储在云存储服务和远程文件服务器上。支持 Amazon S3、IDrive e2、Backblaze (B2)、Box、Dropbox、FTP、G…

【Flask框架】——27 SQLAlchemy高级

1、排序 order_by方法排序:可以指定根据模型中某个属性进行排序,"模型名.属性名.desc()"代表的是降序排序。 # 根据年龄降序 lst session.query(Student).order_by(Student.age.desc()).all() # 根据年龄升序 lst session.query(Student).…

WinNTSetup V5.3.0 Bata5 单文件版

前言 WinNTSetup 是一款Windows系统硬盘安装器,支持从PE和本地安装系统,支持支持NT内核的系统。 WinNTSetup 包括XP、Win7、Win8、Win8.1、Win10等这些系统。直接从硬盘安装系统,不需要光盘。WinNTSetup 还附加一些系统优化功能&#xff0…

Android---简易的底部导航栏

目录 一、activity_main.xml布局 二、给ViewPager2 创建适配器 三、ViewPager2 数据源 四、MainActivity.java类 1、初始化数据源。 2、ViewPager2 页面改变监听 3、BottomNavigationView 的每个 item 点击的监听 这里简单演示实现效果,实现快速开发&#xff…

mmdetection从入门到精通(一)-汇总目录

1.简介 MMDetection 是商汤出品的集成了目标检测/实例分割分割/全景分割几个方面顶级模型组合的,模块化的,基于 PyTorch 的目标检测开源工具箱。是深度学习工作者的必备工具,非常有必要深入掌握。 近期汇总一下从入…

今年最后一场官方活动

阅读本文大概需要 1.6 分钟。2022 年 12 月 26,新型冠状病毒肺炎正式更名为了新型冠状病毒感染,不再纳入《中华人民共和国国境卫生检查疫法》 规定的检疫传染病管理。文字层面上,这意味着我们口中的疫情,结束了。然而我却认为并没…

Django学习 Day9

1.F对象 一个F对象代表数据库中某条记录的字段的信息。 作用: 通常是对数据库中的字段的值在不获取的情况下进行操作 用于类属性(字段)之间的比较。 语法: From django.db.models import F F(‘列名’)例子: 所有Book数据表中的…

云游戏的2022:破局、新生、元宇宙

文|智能相对论 作者|青月 如果说2021年是「元宇宙元年」,那么2022年更像是元宇宙的「祛魅之年」,在这一年里,原本处在狂奔状态下的元宇宙正在褪去虚火。 在这样的大环境下,由于在实时性、兼容性、无限开创等关键特性的理念上的…

99. 激光炸弹——二维前缀和

地图上有 N 个目标,用整数 Xi,Yi 表示目标在地图上的位置,每个目标都有一个价值 Wi。 注意:不同目标可能在同一位置。 现在有一种新型的激光炸弹,可以摧毁一个包含 RR 个位置的正方形内的所有目标。 激光炸弹的投放是通过卫星定…

eclipse中安装ERMaster

eclipse中安装ERMaster 简介 参考网址: https://www.bilibili.com/video/BV1R4411a73T/?p22&spm_id_from333.880.my_history.page.click&vd_source42661b67a37800001020550eb4a4c45e 主要看这 3 集 ERMaster 在 jeesite 官网的介绍项目 参考网址&#x…

systemd(二)单元配置文件

概述 对于系统中的每一个单元(unit)都有一个配置文件,用于指示systemd如何启动或停止这个单元。 配置文件格式 [Unit]区块 [Unit]区块通常是配置文件的第一个区块,用来定义单元的元数据,以及配置与其他单元的关系。…

多线程模式下保证事物的一致性

目录前置InsertBatchSuccessServiceImpl.javaInsertBatchErrorServiceImpl.java效果图前置 在一些特殊的场景下, 我们需要一些特定的操作. 比如我有一个接口, 做如下操作, 需要保持事物的一致性, 即: 全部成功则提交, 一个异常则全部回滚: 1.insert订单、(耗时1秒) 2.insert订单…

4、MYSQL常用函数(字符串函数)

目录 1、concat函数: 2、insert(str,x,y,instr)函数: 3、lower(str)和upper(str)函数: 4、left(str,x)和right(str,x)函数: 5、lpad(str,n,pad) 和rpad(str,n,pad) 函数: 6、ltrim(str)和rtrim(str)函数&#xff…

【大厂高频真题100题】《除自身以外数组的乘积》 真题练习第19题 持续更新~

除自身以外数组的乘积 给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请不要使用除法,且在 O(n) 时间复杂度内完成…

微软补丁包下载

Microsoft Update Cataloghttps://www.catalog.update.microsoft.com/Home.aspxMicrosoft Update CatalogMicrosoft Update Cataloghttps://www.catalog.update.microsoft.com/Home.aspx

城市通信管线资源管理解决方案

01 背景 随着新基建发展,智慧项目如火如荼,网络畅通、高速成为了刚需,城市通信网络管线资源重要性不言而喻,在实际项目中,我们也不难发现有关于“通信网络管线管理”“光缆资源管理”项目愈发增多,大多客户…

(五)JSP

一、JSP 概述 JSP(全称:Java Server Pages):Java 服务端页面。是一种动态的网页技术,其中既可以定义HTML、JS、CSS等静态内容,还可以定义Java代码的动态内容,也就是 JSP HTML Java 。二、JSP …

基于注解的AOP之准备工作以及各种通知

目录 基于注解的AOP之准备工作以及各种通知 1. 技术说明 2. 准备工作 ①添加依赖 ②准备被代理的目标资源 3. 创建切面类并配置 在Spring的配置文件中配置: ​​​​​​4. 各种通知 各种通知的执行顺序: 基于注解的AOP之准备工作以及各种通知 …