Vue基础(24)_VueCompinent构造函数、Vue实例对象与组件实例对象

分析上一节代码中的school组件:

该组件是一个名为VueCompinent的构造函数。

截取部分vue.js源码,分析Vue.extend:

        // 定义一个名为VueComponent的构造函数对象Sub,往Sub对象调用_init(options)方法,参数为配置项:optionsvar Sub = function VueComponent(options) {this._init(options);};// 定义了一个Vue.extend函数,参数:extendOptions,返回值为构造函数对象Sub。Vue.extend = function (extendOptions) {...var Sub = function VueComponent(options) {this._init(options);};...return Sub;};

关于VueComponent:

1、school组件本质是一个名为VueComponent的构造函数,通过Vue.extend方法生成的。


2、我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)


3、特别注意:每次调用Vue.extend,返回的都是一个全新的VueCompinent!!!(VueComponent构造函数所创建的新对象,同属于VueComponent一类,即便配置项一样,新对象之间内存分配的地址不同,对象也互不相同)


4、关于this指向:
(1).组件配置中:
data、methods、watch、computed中的函数,它们的this指向都是【VueCompinent实例对象】
(1).new Vue(options)配置中:
data、methods、watch、computed中的函数,它们的this指向都是【Vue实例对象】


5、VueCompinent的实例对象,以后简称vc(也可称之为:组件实例对象)。Vue的实例对象,以后简称vm

Vue实例对象【vm】 VS 组件实例对象【vc】

1、【官方解释】组件是可复用的Vue实例,它们与new Vue接受相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项

-------------------------------------------------------------------------------------------------------------------------

简而言之:组件实例对象【vm】和Vue实例对象【vc】很像,【vc】有的功能【vm】都有,但【vc】没有el选项(由【vm】统一管理el)。

2、【官方解释】一个组件的data选项必须是一个函数,因此每个实例可以维护一份被遣返对象的独立的拷贝

-------------------------------------------------------------------------------------------------------------------------

简而言之:关于data选项,【vm】可以使用函数或对象形式创建,但【vc】必须使用函数形式创建。

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

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

相关文章

萤石云替代产品摄像头方案萤石云不支持TCP本地连接-东方仙盟

不断试错东方仙盟深耕科研测评&#xff0c;聚焦前沿领域&#xff0c;以严谨标准评估成果&#xff0c;追踪技术突破&#xff0c;在探索与验证中持续精进&#xff0c;为科研发展提供参考&#xff0c;助力探路前行 萤石云价格萤石云的不便于使用 家庭场景&#xff1a;成本可控与隐…

C51:用DS1302时钟读取和设置时间

因为在ds1302.c文件中包含了写ds1302&#xff08;51向ds1302写数据&#xff09;和读ds1302&#xff08;51从ds1302读数据&#xff09;的两个函数&#xff0c;我们根据文件中提供的函数来写读取时间和设置时间的函数即可ds1302.c文件源码如下&#xff0c;需要的同学可以参考一下…

webrtc整体架构

WebRTC&#xff08;Web Real-Time Communication&#xff09;是一套支持浏览器和移动应用进行实时音视频通信的开源技术标准&#xff0c;其架构设计围绕 “实时性”“低延迟”“跨平台” 和 “安全性” 展开&#xff0c;整体可分为核心引擎层、API 层、支撑服务层三大部分&…

浅析PCIe 6.0 ATS地址转换功能

在现代高性能计算和虚拟化系统中,地址转换(Address Translation)是一个至关重要的机制。随着 PCIe 设备(如 GPU、网卡、存储控制器)直接访问系统内存的能力增强,设备对虚拟内存的访问需求日益增长。 为了提升性能并确保安全访问,Address Translation Services(ATS) 应…

【前端】ikun-pptx编辑器前瞻问题二: pptx的压缩包结构,以及xml正文树及对应元素介绍

文章目录PPTX文件本质&#xff1a;一个压缩包核心文件解析1. 幻灯片内容文件 (ppt/slides/slideX.xml)2. 元素类型解析文本框元素 (p:sp)图片元素 (p:pic)单位系统开发注意事项参考工具pptx渲染路线图PPTX文件本质&#xff1a;一个压缩包 PPTX文件实际上是一个遵循Open XML标准…

分布式任务调度实战:XXL-JOB与Elastic-Job深度解析

告别传统定时任务的局限&#xff0c;拥抱分布式调度的强大与灵活 在现代分布式系统中&#xff0c;高效可靠的任务调度已成为系统架构的核心需求。面对传统方案&#xff08;如Timer、Quartz&#xff09;在分布式环境下的不足&#xff0c;开发者急需支持集群调度、故障转移和可视…

Windows 11下纯软件模拟虚拟机的设备模拟与虚拟化(仅终端和网络)

Windows 11下用GCC的C代码实现的虚拟机需要终端输入/输出&#xff08;如串口或虚拟控制台&#xff09;和网络连接&#xff0c;但不需要完整的硬件设备&#xff08;如磁盘、显卡、USB 等&#xff09;。在终端输入/输出方面&#xff0c;参考qemu的源代码&#xff0c;但不调用qemu…

CCF-GESP 等级考试 2025年6月认证Python六级真题解析

1 单选题&#xff08;每题 2 分&#xff0c;共 30 分&#xff09;第1题 下列哪一项不是面向对象编程&#xff08;OOP&#xff09;的基本特征&#xff1f;&#xff08; &#xff09;A. 继承 (Inheritance) B. 封装 (Encapsul…

C++中的deque

1. 什么是 Deque&#xff1f; 核心概念&#xff1a; Deque 是 “Double-Ended Queue”&#xff08;双端队列&#xff09;的缩写。你可以把它想象成一个可以在两端&#xff08;头部和尾部&#xff09;高效地进行添加或删除操作的线性数据结构。关键特性&#xff1a; 双端操作&am…

GNU到底是什么,与Unix和Linux是什么关系

GNU&#xff08;发音为 /ɡnuː/&#xff0c;类似“革奴”&#xff09;是一个自由软件操作系统项目&#xff0c;由理查德斯托曼&#xff08;Richard Stallman&#xff09;于1983年发起&#xff0c;目标是创建一个完全由自由软件组成的类Unix操作系统。它的名字是一个递归缩写&a…

双指针算法介绍及使用(下)

在上一篇文章中我们已经对双指针有了一定了解&#xff0c;接下来我们通过题目来对双指针进行更好的理解。 1. leetcode 202. 快乐数 这道题使用的方法是快慢指针&#xff0c; 比如说一个数X&#xff0c;那么创建两个变量X1和X2&#xff0c;然后X1每次变化两次&#xff0c;X2变化…

Elasticsearch整合:Repository+RestClient双模式查询优化

Elasticsearch整合&#xff1a;RepositoryRestClient双模式查询优化Elasticsearch 双模式查询优化&#xff1a;Repository RestClient 整合指南一、架构设计&#xff1a;双模式协同工作流二、Repository 模式&#xff1a;快速开发最佳实践2.1 基础配置2.2 高级特性&#xff1a…

Elasticsearch 高级查询语法 Query DSL 实战指南

目录 1、DSL 概述 1.1 DSL按照查询的结构层次划分 1.2 DSL按照检索功能的用途和特性划分 1.3 示例数据准备 2、match_all ——匹配所有文档 3、精确匹配 3.1 term——单字段精确匹配查询 3.2 terms——多值精确匹配 3.3 range——范围查询 3.4 exists——是否存在查询…

DNS 服务正反向解析与 Web 集成实战:从配置到验证全流程

DNS 服务正反向解析配置全流程指南 一、前言 在网络环境中&#xff0c;DNS&#xff08;Domain Name System&#xff09;服务起着至关重要的作用&#xff0c;它负责将域名解析为 IP 地址&#xff0c;以及将 IP 地址反向解析为域名。本文将详细介绍如何配置 DNS 服务的正反向解析…

2025.07.25【宏基因组】|PathoScope 安装与使用指南

PathoScope 安装与使用指南&#xff1a;微生物组数据分析利器 作为一名生物信息工程师&#xff0c;在微生物组数据分析中&#xff0c;我们常常需要高效、准确的工具来鉴定和量化样本中的微生物组成。PathoScope 正是这样一款强大的工具&#xff0c;它能够帮助我们从高通量测序…

AI结对编程:分布式团队的集体记忆外脑

AI结对编程:分布式团队的集体记忆外脑 “当新人通过AI瞬间掌握三年积累的业务规则时,传统‘传帮带’模式正式宣告过时——分布式团队最珍贵的资产不再是代码,而是被AI固化的集体经验。” 一、人脑的带宽困局 柏林新人加入新加坡支付团队,面临恐怖的知识迷宫: - …

栈----1.有效的括号

20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; /** 括号特性: 左括号必定先出现,每个左括号都需要一个右括号与之匹配,后出现的左括号先匹配 解法: 依据后出现的左括号先匹配,很容易联想到栈,即后进先出 遍历字符串,遇到左括号就在栈中添加一个对应的右括号 遇到右括…

数据报表怎么自动填写内容?总结了几个方法

你有没有遇到过这种情况&#xff1f;月底赶销售报告&#xff0c;Excel里密密麻麻的数据要往Word里搬&#xff0c;光是复制粘贴就折腾半小时&#xff0c;好不容易搞完&#xff0c;老板突然说数据有更新…得&#xff0c;全白干&#xff01;更崩溃的是&#xff0c;这种重复劳动每个…

构造函数是否可以声明成虚函数?

构造函数&#xff08;constructor&#xff09;不能被声明为虚函数。✅ 原因解释 构造函数的主要职责是创建并初始化对象本身&#xff0c;而虚函数机制是基于 虚表指针&#xff08;vptr&#xff09; 的&#xff0c;它只有在对象构造完成之后才会起作用。 所以&#xff1a; 在构造…

【Rust线程池】如何构建Rust线程池、Rayon线程池用法详细解析

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…