Vue函数式组件

函数式组件

📌函数式组件是 Vue.js 中一种特殊类型的组件,它是无状态的、无实例的,没有生命周期.主要用于处理简单的 UI 渲染任务。函数式组件的声明方式和使用方式与常规组件有所不同,适用于一些简单的场景,例如只依赖于传入的 props 和上下文的组件。

声明方式

functional: true:设置组件为函数式组件。函数式组件没有实例上下文,没有生命周期钩子。

函数式组件的 render 函数接收两个参数:createElementcontext

  1. createElement: 用于创建VNode(虚拟节点)。

    • h('div', { class: 'my-functional-component' }, context.props.message):使用 createElement 函数创建一个 div 元素,类名为 my-functional-component,内容为 message 属性的值。
  2. context: 包含了组件的上下文信息,没有 this,所以通过 context 来访问属性和插槽等信息。

    context 对象的主要属性包括:

    • props: 定义组件接收的属性。在这里,我们定义了一个 message 属性。
    • children: 子节点。
    • slots: 插槽内容。
    • data: 数据对象,包含 classstyle 等属性。
    • parent: 父组件实例。
    • listeners: 事件监听器。
// 定义函数式组件
const MyFunctionalComponent = {functional: true,props: {message: {type: String,required: true}},render(h, context) {// `h` 是 createElement 函数,`context` 是上下文对象return h('div', { class: 'my-functional-component' }, context.props.message);}
};// 全局注册函数式组件
Vue.component('my-functional-component', MyFunctionalComponent);// 创建 Vue 实例并使用全局组件
new Vue({el: '#app',template: `<div><h1>Hello from Parent Component!</h1><my-functional-component message="Hello from Functional Component!"></my-functional-component></div>`
});

特点

  1. 无状态:函数式组件是无状态的,不允许使用 data 选项,并且没有实例,因此也无法使用实例生命周期钩子函数。
  2. 无实例:没有实例上下文(没有 this)。由于函数式组件没有实例,因此无法使用 this 关键字,包括无法访问实例的 datamethods
  3. 性能高:因为不需要实例化,所以渲染性能较高。函数式组件相对于常规组件具有更轻量的性能开销,因为它们不涉及实例的创建和维护。
  4. 只渲染:专注于渲染,适合简单的展示逻辑。
  5. props** 参数:** ​
    • 函数式组件的 render 函数接受两个参数:h(用于创建虚拟节点的 createElement 函数)和一个上下文对象。上下文对象包含了 propschildren(子节点)、parent(父组件的实例)等信息。
  6. render** 函数:** ​
    • 在函数式组件中,主要工作是通过 render 函数创建虚拟节点。render 函数的返回值是一个虚拟节点,它描述了组件的结构和内容。
  7. 适用场景:
    • 函数式组件适用于简单的 UI 渲染任务,特别是那些只依赖于传入的 props 和上下文信息的组件。
  8. 示例:
    • 一个简单的函数式组件示例,用于显示传入的 message
    <template functional><div>{{ props.message }}</div>
    </template><script>
    export default {functional: true,props: {message: String}
    };
    </script>
    
    函数式组件的使用场景主要是在需要优化性能或者处理简单渲染的场合,它可以减少实例的创建和销毁的开销。但请注意,函数式组件的能力相对有限,不适用于所有情况,因此在选择使用时需要谨慎考虑。

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

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

相关文章

Aigtek高压放大器在柔性爬行机器人驱动性能研究中的应用

实验名称&#xff1a;柔性爬行机器人的材料测试 研究方向&#xff1a;介电弹性体的最小能量结构是一种利用DE材料的电致变形与柔性框架形变相结合设计的新型柔性驱动器&#xff0c;所谓最小能量是指驱动器在平衡状态时整个系统的能量最小&#xff0c;当系统在外界的电压刺激下就…

10.Docker Compose容器编排

文章目录 Compose简介安装和卸载步骤核心概念compose文件两要素 使用步骤Compose常用命令微服务测试本地编码打包编写Dockerfile文件构建镜像 不使用Compose调试使用Compose调试WordPress测试验证增量更新 Compose简介 ​ docker建议我们每一个容器中只运行一个服务,因为docke…

Memcached深度解析:打造闪电般的数据存储

Memcached是一个高性能的分布式内存对象缓存系统&#xff0c;通过在内存中缓存数据和对象来减少访问数据库的次数&#xff0c;从而加速动态数据库驱动的网站。本文将全面介绍Memcached的基本概念、使用方法、主要作用以及注意事项。 一、Memcached简介 1. Memcached的起源 Me…

开源复刻apple 数学笔记;纯C++实现了ChatGLM系列模型;腾讯混元文生图模型发布新版本并开源训练代码

✨ 1: AI Math Notes AI Math Notes 是一个交互式绘图应用&#xff0c;可绘制并计算数学方程。 AI Math Notes 受到Apple在WWDC 2024上的“Math Notes”演启发&#xff0c;开发的一个互动式绘图应用程序&#xff0c;用户可以在画布上绘制数学方程。一旦方程被绘制完成&#x…

Win11升级24H2出现绿屏怎么办?这些方法帮你解决!

在Win11电脑操作中&#xff0c;用户为了体验24H2版本推出的新功能&#xff0c;所以要把系统版本升级为24H2版本。但升级过程中电脑却出现了绿屏问题&#xff0c;不清楚要怎么操作才能解决绿屏的问题&#xff1f;接下来小编给大家分享几种简单有效的解决方法&#xff0c;让大家能…

CSRF、XSS、盗链攻击解释

CSRF&#xff08;Cross-Site Request Forgery&#xff0c;跨站请求伪造&#xff09; CSRF是什么 CSRF 是一种攻击方式&#xff0c;攻击者通过利用用户在已认证的应用程序中的身份&#xff0c;伪造用户的请求来执行未经授权的操作。 这种攻击可以导致用户在不知情的情况下完成…

氧化铈稳定氧化锆(Ce-TZP)性能优成本低 市场发展潜力较大

氧化铈稳定氧化锆&#xff08;Ce-TZP&#xff09;性能优成本低 市场发展潜力较大 CeO2稳定ZrO2&#xff0c;氧化铈稳定氧化锆&#xff0c;英文缩写Ce-TZP&#xff0c;一种陶瓷材料&#xff0c;是以氧化锆为基体&#xff0c;以氧化铈为稳定剂&#xff0c;制造而成的增韧陶瓷。 氧…

芯片封测从入门到精通

文章目录 &#x1f4d1;前言一、作者简介二、书籍亮点三、内容简介四、适读人群 &#x1f4d1;前言 在科技日新月异的今天&#xff0c;芯片作为现代电子设备的核心部件&#xff0c;其性能与可靠性直接决定了整个产品的竞争力。而芯片封测&#xff0c;作为确保芯片性能与可靠性…

Aspice介绍——测试流程

文章目录 ASPICE简介一、V字模型的示意二、测试领域2.1 SWE.6&#xff1a;软件合格性测试过程目的过程成果基本实践&#xff08;BP&#xff09; 2.2 SYS.4:系统集成和集成测试过程目的过程成果基本实践&#xff08;BP&#xff09; 2.3 SYS.5&#xff1a;系统合格性测试过程目的…

【Java】已解决java.lang.NullPointerException异常

文章目录 一、问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决java.lang.NullPointerException异常 一、问题背景 在Java编程中&#xff0c;java.lang.NullPointerException&#xff08;空指针异常&#xff09;是一种常见的运行时异常。当应…

一些个人电脑用的小工具软件

1 个人电脑信息管理 如下&#xff1b; 整理自己的电脑信息&#xff1b;录入&#xff0c;保存&#xff0c;查询&#xff1b;添加和更新界面如下&#xff0c; 每次添加、更新之后重新点一下菜单的浏览&#xff1b; 下载&#xff0c; https://download.csdn.net/download/bcb…

Opencv无法自动补全

执行下面两条命令&#xff1a; 特别说明: 即使能补全了&#xff0c;但是还是有弊端&#xff0c;写参数的时候没有参数的候选项&#xff0c;所以相当于只能补全个函数名&#xff0c;谁有更好的解法&#xff0c;恳求留言告知。 参考1&#xff1a;https://blog.csdn.net/yuezhilan…

Java学习 -MySQL数据库索引以及索引优化 实例

7种 JOIN-ON 看图 索引的概念 概念&#xff1a;索引是一种帮助MySQL高效查询数据和排序数据的数据结构本质&#xff1a;在数据之外&#xff0c;数据库系统还维护一种数据结构&#xff0c;该数据结构称为索引&#xff0c;作用是能够帮助MySQL快速查找和排序数据底层&#xff…

SpringBoot+Vue小区物业管理系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码1.用户登录代码2.查询小区信息代码3.保存缴费信息代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBootVue框架开发的小区物业管理系统。首先&#xf…

深入探索 Rust 的 clap 库:命令行解析的艺术

版本声明 Rust: 1.76clap: 4.5.1clap_complete 4.5.1rpassword: 7.3.1 结论先行 本文将从 CLI&#xff08;Command Line Interface&#xff09;命令行工具的概述讲起&#xff0c;介绍一个优秀的命令行工具应该具备的功能和特性。然后介绍 Rust 中一个非常优秀的命令行解析工…

《Windows API每日一练》4.3 点和线的绘制

理论上&#xff0c;所有的图形设备驱动程序所需要的就是SetPixel函数和GetPixel函数。其余的一切都可以使用在GDI模块中实现的更高层的例程来处理。例如&#xff0c;画一条线&#xff0c;GDI可以不停地调整x和y坐标&#xff0c;然后连续调用多次SetPixel函数来实现。 事实上&a…

2024 年最新 windows 操作系统部署安装 redis 数据库详细教程(更新中)

Redis 数据库概述 Redis 是一个开源的&#xff0c;内存中的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息中介。Redis&#xff08;Remote Dictionary Server &#xff09;&#xff0c;即远程字典服务&#xff0c;是一个开源的使用ANSI C语言编写、支持网络、可基…

Vue3中出现 Uncaught (in promise) TypeError: data.includes is not a function 解决方法

目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 执行Vue3的时候浏览器终端出现如下问题 Uncaught (in promise) TypeError: data.includes is not a functionat Object.updateCurrentRowData (current.ts:40:15)at Object.setData (index.ts:35:22)at Object.commit (in…

轻型钢结构乙级资质设计项目实例集锦

小型物流仓库项目&#xff1a;设计一个占地面积约5000平方米的单层轻型钢结构物流仓库&#xff0c;采用门式刚架结构&#xff0c;优化空间布局&#xff0c;提高存储效率&#xff0c;同时满足防火和通风要求。 商业街改造项目&#xff1a;在城市中心区域&#xff0c;利用轻型钢…

力扣上的经典问题:接雨水

力扣上的经典问题&#xff1a;接雨水 在众多的编程题库中&#xff0c;力扣&#xff08;LeetCode&#xff09;是一个非常受欢迎的平台&#xff0c;拥有大量的算法和数据结构练习题。其中&#xff0c;接雨水&#xff08;Trapping Rain Water&#xff09;问题因其巧妙的思路和广泛…