当前位置： 首页 > news >正文

vue组合式API及生命周期钩子函数

news 文章来源：https://blog.csdn.net/tangyu520lehua/article/details/128965494 2025/2/1 9:05:59

一、组合式API

  • 什么是组合式API？
    • vue3中支持vue2的选项式、支持新的编程模式–函数式编程（没有this指针）
    • 做了一个兼容，可以在一个组件中使用函数式编程和OOP编程（选项式）

setup()函数

  • 可以使用setup属性来实现函数式编程
  • 内部直接编写任意代码，可以直接调用，不存在块作用域（方法必须写在methods中）
  • setup中不可以使用外边data数据，定义响应式数据–关联对象–必须使用ref函数来定义（如果是使用ref定义的变量，那么直接使用）
 //如果是使用ref定义的变量，那么直接使用，并且获取值需要使用.value属性获取console.log('函数式编程', name.value);
  • 定义响应式数据–关联对象–必须使用ref函数来定义
  //定义响应式数据--关联对象--必须使用ref函数来定义const name =Vue.ref('画虎')
  • ref赋值，不能够直接给数据赋值，只能给数据的.value赋值
setName() {//ref赋值，不能够直接给数据赋值，只能给数据的.value赋值name.value = 'dada'}
  • 获取节点

    • 1、定义一个空的ref对象

    • 2、这个对象的名字必须和dom节点上的ref属性名字一致
      在这里插入图片描述

    • 3、必须导出这个ref对象
      在这里插入图片描述

  • 因为ref是关联对象，所以vue3给出了另外一个定义响应式数据的函数–reactive
  • ref定义的是一个数据ref对象，reactive定义的是一个对象
  • 所以reactive相当于之前的data属性
<body><div id="root" class="container"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body"><div class="form-group"><label for="">用户名字</label><input ref="node" type="text" class="form-control" v-model="name" placeholder="Input field"></div><div class="form-group"><label for="">登录次数</label><input ref="node" type="text" class="form-control" v-model="obj.count" placeholder="Input field"></div><div class="form-group"><label for="">只读的值</label><input ref="node" type="text" class="form-control" v-model="readValue" placeholder="Input field"></div><button type="submit" @click="showName" class="btn btn-primary">获取值</button><button type="submit" @click="setName" class="btn btn-primary">赋值</button><button type="submit" @click="getNode" class="btn btn-primary">获取节点</button></div><panel :count="obj.count"><panel/></div></div><script>const Panel = {template: `<div class="panel panel-warning"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body">获取父组件传递的数据{{mycount}}</div></div>`,// 如果涉及组件props传参，还是要用props属性接收数据和定义数据props: {count: Number},setup(props) {/* 如果在setup钩子函数中要使用props的数据，必须先使用props定义和接收数据，然后通过setup参数获取数据 */console.log(props)//如果要修改数据const mycount = Vue.ref(props.count * 10)return {mycount}}}Vue.createApp({// 组件注册，还是使用components属性components: {'panel':Panel},// 可以使用setup属性来实现函数式编程// 内部直接编写任意代码，可以直接调用，不存在块作用域（方法必须写在methods中）setup() { 如果定义的方法，dom节点需要使用，必须进行导出--returnfunction showName() {//setup中不可以使用外边的data数据//如果是使用ref定义的变量，那么直接使用，并且获取值需要使用.value属性获取console.log('函数式编程', name.value)console.log('获取reactive的值', obj.count)console.log('获取redonly的值', readValue);}//定义响应式数据--关联对象--必须使用ref函数来定义const name =Vue.ref('画虎')//获取节点：// 1、定义一个空的ref对象// 2、这个对象的名字必须和dom节点上的ref属性名字一致// 3、必须导出这个ref对象const node = Vue.ref()function getNode() {console.log(node.value)//}/*** + 因为ref是关联对象，所以vue3给出了另外一个定义响应式数据的函数--reactive+ ref定义的是一个数据ref对象，reactive定义的是一个对象+ 所以reactive相当于之前的data属性*/const obj = Vue.reactive({count:1})  /** 定义只读数据 */const readValue = Vue.readonly(10000)return {name,node,obj,readValue,showName,setName() {//ref赋值，不能够直接给数据赋值，只能给数据的。value赋值name.value = 'dada'},getNode}}}).mount('#root')</script>
</body>
</html>

函数式编程组件传值

  • 组件注册，还是使用components属性
 // 组件注册，还是使用components属性components: {'panel':Panel},
  • 如果涉及组件props传参，还是要用props属性接收数据和定义数据
 // 如果涉及组件props传参，还是要用props属性接收数据和定义数据props: {count: Number},
  • 如果再setup钩子函数中要使用props的数据，必须使用props选项来定义数据，然后在setup钩子函数中使用形参来接收数据
setup(props) {/* 如果在setup钩子函数中要使用props的数据，必须先使用props定义和接收数据，然后通过setup参数获取数据 */console.log(props)//如果要修改数据const mycount = Vue.ref(props.count * 10)return {mycount}}

生命周期钩子函数

  • setup钩子函数要早于beforeCreate生命周期，并且它实现了方法和数据定义所以setup可以理解为创建生命周期
  • 因此setup钩子函数中如果要实现生命周期，那么没有创建生命周期，只有挂载、更新、卸载
  • 所以vue3的生命周期钩子函数有6个：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted
  • 四个阶段，每一个阶段分为之前之后，vue3中提供了两种写法，选项式和钩子函数式，在setup中没有创建生命周期，因为setup限于创建生命周期而执行，所以可以把setup当创建生命周期使用
    在这里插入图片描述

相关文章：

vue组合式API及生命周期钩子函数

一、组合式API 什么是组合式API&#xff1f; vue3中支持vue2的选项式、支持新的编程模式–函数式编程&#xff08;没有this指针&#xff09;做了一个兼容&#xff0c;可以在一个组件中使用函数式编程和OOP编程&#xff08;选项式&#xff09; setup()函数 可以使用setup属性…...

编程日记 2023/2/12 8:38:26

Python|每日一练|数组|回溯|二分查找|排序和顺序统计量|.update方法 |单选记录：组合总和|寻找峰值|编程通过键盘输入每一位运动员

1、组合总和&#xff08;数组、回溯&#xff09; 给定一个无重复元素的数组 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的数字可以无限制重复被选取。 说明&#xff1a; 所有数字&#xff08;包括 t…...

编程日记 2023/2/12 8:36:09

minio下载文件速度很慢的原因分析与说明

文章目录1.实战背景2.问题描述3.问题分析4.问题解决1.实战背景 最近在做一个项目&#xff0c;需要用到minio来搭建文件系统&#xff0c;先简单说一下我在项目中设置的上传文件流程&#xff1a; 前端将分块文件逐一传给后端&#xff0c;后端再存储到 linux服务器的minio 当中。…...

编程日记 2023/2/12 8:34:58

基于comsol软件弯曲单模光纤模拟仿真

在本节中&#xff0c;主要基于实验室实际光纤单模圆柱光纤进行模拟&#xff0c;与comsol案例库文件在分析过程和建模有些差异&#xff1a; 模拟主要通过以下三个步骤进行&#xff1a;模型的几何构建、物理场的添加研究、结构处理分析来进行。 下面是第一步骤&#xff1a;几何…...

编程日记 2023/2/12 8:32:39

如何开启多个独立Chrome浏览器

一、简介 作为测试或者开发人员&#xff0c;有些情况下会用到 Chrome 浏览器&#xff0c;但有时是同一个 Chrome 浏览器无法为我们提供隔离开的不同环境。这样 我们就需要清理 cache 、切换账号等&#xff0c;降低了我们的工作效率。今天的主题是如何开启多个独立的 Chrome 浏…...

编程日记 2023/2/12 8:31:26

erp5开源制造业erp主要业务会计分录处理

erp5开源制造业erp主要业务会计分录处理 采购业务的会计分录 收到发票时 借&#xff1a;材料采购 (1201) 应交税费-应交增值税&#xff08;进项税&#xff09;(21710101) 贷&#xff1a;应付账款 (2121) 付款时 借&#xff1a;应付账款 (2121) 贷&#xff1a;银行存款 (1002) 入…...

编程日记 2023/2/12 8:30:15

技能树基础——17四平方和（拉格朗日定理，嵌套循环）

题目&#xff1a;四平方和定理&#xff0c;又称为拉格朗日定理&#xff1a;每个正整数都可以表示为至多4个正整数的平方和。如果把0包括进去&#xff0c;就正好可以表示为4个数的平方和。比如&#xff1a;5 0^ 2 0^ 2 1^ 2 2^27 1^ 2 1^ 2 1^ 2 2^2 &#xff08;^符号表…...

编程日记 2023/2/12 8:29:06

JPA、EJB、事物管理---相关内容整理

目录 ■前言 ■实现原理&#xff1a;容器管理事务 ■代码实现简单描述&#xff1a; 1.JPA ■定义 ■1.1.配置文件 ■1.2.OSS jar ■1.3.一些OPA的类&#xff08;举例&#xff09; ■1.4. jpa 框架在实体类&#xff08;Entity&#xff09;中添加非数据库字段的属性--…...

编程日记 2023/2/12 8:27:57

C语言学习笔记(一)：了解C语言

什么是C语言 C语言是一种高级编程语言&#xff0c;最早由丹尼斯里奇在1972年开发。它是一种通用编程语言&#xff0c;提供了高级编程语言的方便和易用性&#xff0c;同时又有较低级别的编程语言的灵活性和效率。C语言在许多操作系统、编译器和应用程序开发中广泛使用&#xff…...

编程日记 2023/2/12 8:26:46

回头看——《智能家居项目小结》

openAI兴起&#xff0c;于是拿着之前小组合作的项目&#xff08;承认优化较差&#xff09;&#xff0c;交给AI试着帮忙优化下&#xff11;.功能函数&#xff08;TCP_SER_INIT&#xff09;优化源代码&#xff1a;int TCP_SER_INIT(int *tcpsocket, const char *ip, const char *…...

编程日记 2023/2/12 8:25:35

社交登陆OAuth2.0

QQ、微博、github 等网站的用户量非常大&#xff0c;别的网站为了 简化自我网站的登陆与注册逻辑&#xff0c;引入社交登陆功能&#xff1b; 步骤&#xff1a; 1&#xff09;、用户点击 QQ 按钮 2&#xff09;、引导跳转到 QQ 授权页 3&#xff09;、用户主动点击授权&#xff…...

编程日记 2023/2/12 8:23:18

C++005-C++选择与分支2

文章目录C005-C选择与分支2条件语句C实现else if 语句题目描述 根据成绩输出成绩等级ABCDEif嵌套语句题目描述 输出三个数中的最大值题目描述 模拟游戏登录switch语句三元运算符题目描述 输出三个数中的最大值-基于3元运算符题目描述 根据1-7输出星期1-星期日案例练习题目描述 …...

编程日记 2023/2/12 8:20:54

IPFS 简介及概述

文章目录 IPFS 简介IPFS 包含的协议内容及其理解IPFS 和 BitTorrent 区别IPFS 简介 星际文件系统(InterPlanetary File System). IPFS 是一个分布式的网络文件系统, 点到点超媒体协议. 可以让我们的互联网速度更快, 更加安全, 并且更加开放. IPFS协议的目标是取代传统的互联网…...

编程日记 2023/2/12 8:19:43

初学者必读：讲解 VC 下如何正确的创建、管理及发布项目

Visual C 的项目文件组成&#xff0c;以及如何正确的创建及管理项目。 本内容是初学者必须要掌握的。不能正确的管理项目&#xff0c;就不能进一步写有规模的程序。 一、项目下各种常见文件类型的功能 1. 代码文件 扩展名为 .cpp、.c、.h 等。 通常情况下&#xff0c;项目…...

编程日记 2023/2/12 8:17:22

剑指offer（中等）

目录 二维数组中的查找 重建二叉树 矩阵中的路径 剪绳子 剪绳子② 数值的整数次方 表示数值的字符串 树的子结构 栈的压入、弹出序列 从上到下打印二叉树① 从上到下打印二叉树③ 二叉搜索树的后序遍历序列 二叉树中和为某一值的路径 复杂链表的复制 二叉搜索树与…...

编程日记 2023/2/12 8:16:11

微软发布会精华回顾：“台式电脑”抢了风头

Lightbot北京时间2016年10月26日晚10点&#xff0c;微软在纽约发布了名为 Surface Studio 的一体机、名为 Surface Dial 的配件以及外观未变的顶配版 Surface Book。同时&#xff0c;微软宣布了 Windows 10 下一个重要版本——“Creators Update”的数项新功能&#xff0c;包括…...

编程日记 2023/2/12 8:15:02

CF1561C Deep Down Below 题解

CF1561C Deep Down Below 题解题目链接字面描述Deep Down Below题面翻译题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1提示思路TLE算法具体思想TLE特例AC思想代码实现备注题目 链接 https://www.luogu.com.cn/problem/CF1561C 字面描述 Deep Down Below 题面翻译…...

编程日记 2023/2/12 8:13:51

秒杀项目之服务调用分布式session

目录 nginx动静分离 服务调用 创建配置zmall-cart购物车模块 创建配置zmall-order订单模块 服务调用 spring session实战 什么是Spring Session 为什么要使用Spring Session 错误案例展示 配置spring-session 二级域名问题 用户登录 nginx动静分离 第1步&#xff…...

编程日记 2023/2/12 8:12:39

聊聊什么是架构，你理解对了吗？

什么是架构？软件有架构？建筑也有架构？它们有什么相同点和不同点？ 下面咱们就介绍一下，容易混淆的几个概念 一、系统与子系统 系统 泛指由一群有关联的个体组成，根据某种规则运作，能完成个别元件不能单独完成的工作的群体。它的意思是 “总体”、“整体”或“联盟” 子系…...

编程日记 2023/2/12 8:11:27

java多线程开发

1.并发和并行 并发&#xff1a;同一时间段内多个任务同时进行。 并行&#xff1a;同一时间点多个任务同时进行。 2.进程线程 进程&#xff08;Process&#xff09;&#xff1a;进程是程序的一次动态执行过程&#xff0c;它经历了从代码加载、执行、到执行完毕的一个完整过程…...

编程日记 2023/2/12 8:09:06

杂记7--opencv的ar码模块学习

背景&#xff1a;项目需要用到marker知识&#xff0c;所以到官网上临时补一些知识。 概要&#xff1a;主要介绍marker一些接口的含义&#xff0c;纯属个人理解&#xff0c;有误则希望大佬不吝赐教 1、 涉及ar码操作学习&#xff0c;其头文件为&#xff1a; #include <op…...

编程日记 2023/2/12 8:07:54

[项目设计]高并发内存池

目录 1、项目介绍 2、高并发内存池整体框架设计 3、thread cache <1>thread cache 哈希桶对齐规则 <2>Thread Cache类设计 4、Central Cache <1>Central Cache类设计 5、page cache <1>Page Cache类设计 6、性能分析 <1>定长内存池实现…...

编程日记 2023/2/12 8:06:42

28岁才转行软件测试，目前32了，我的一些经历跟感受

我是92年的&#xff0c;算是最早的90后&#xff0c;现在跟你介绍的时候还恬不知耻的说我是90后&#xff0c;哈哈&#xff0c;计算机专业普通本科毕业。在一个二线城市&#xff0c;毕业后因为自身能力问题、认知水平问题&#xff0c;再加上运气不好&#xff0c;换过多份工作&…...

编程日记 2023/2/12 8:05:33

Python导入模块的3种方式

很多初学者经常遇到这样的问题&#xff0c;即自定义 Python 模板后&#xff0c;在其它文件中用 import&#xff08;或 from...import&#xff09; 语句引入该文件时&#xff0c;Python 解释器同时如下错误&#xff1a;ModuleNotFoundError: No module named 模块名意思是 Pytho…...

编程日记 2023/2/12 8:04:23

select 与 where、order by、limit 子句执行优先级比较

当 select 和 其他三种语句的一者或者多者同时出现时&#xff0c;他们之间是存在执行先后顺序的。 他们的优先级顺序是&#xff1a;where > select > order by > limit 目录 1、select 与 where 2、select 与 order by 3、order by 与 limit 4、优先级证明 1、s…...

编程日记 2023/2/12 8:03:12

Linux内核并发与竞争-原子操作

一.原子操作的概念首先看一下原子操作&#xff0c;原子操作就是指不能再进一步分割的操作&#xff0c;一般原子操作用于变量或者位操作。假如现在要对无符号整形变量 a 赋值&#xff0c;值为 3&#xff0c;对于 C 语言来讲很简单&#xff0c;直接就是&#xff1a; a3但是 C 语言…...

编程日记 2023/2/12 8:01:58

Java笔记-泛型的使用

参考&#xff1a; Java 泛型&#xff0c;你了解类型擦除吗&#xff1f; 泛型的使用 1、泛型的定义 可以广泛使用的类型&#xff0c;一种较为准确的说法就是为了参数化类型&#xff0c;或者说可以将类型当作参数传递给一个类或者是方法。 2、泛型的使用 2.1泛型类 public c…...

编程日记 2023/2/12 8:00:45

特斯拉无人驾驶解读

来源于Tesla AI Day Tesla无人驾驶算法的核心任务就是如何理解我们所看到的一切呢？也就是说，不使用高端的设备，比如激光雷达，仅仅使用摄像头就能够将任务做得很好。Tesla使用环绕型的8个摄像头获得输入。 第一步是特征提取模块Backbone，无论什么任务都离不开特征…...

编程日记 2023/2/12 7:59:33

生物素-琥珀酰亚胺酯Biotin-NHS；CAS号：35013-72-0；可对溶液中的抗体，蛋白质和任何其他含伯胺的大分子进行简单有效的生物素标记。

结构式&#xff1a; ​ 生物素-琥珀酰亚胺酯Biotin NHS CAS号&#xff1a;35013-72-0 英文名称&#xff1a;Biotin-NHS 中文名称&#xff1a;D-生物素 N-羟基琥珀酰亚胺酯&#xff1b;生物素&#xff0d;琥珀酰亚胺酯 CAS号&#xff1a;35013-72-0 密度&#xff1a;1.50.1 …...

编程日记 2023/2/12 7:58:20

Maven_第五章 核心概念

目录第五章 其他核心概念1、生命周期①作用②三个生命周期③特点2、插件和目标①插件②目标3、仓库第五章 其他核心概念 1、生命周期 ①作用 为了让构建过程自动化完成&#xff0c;Maven 设定了三个生命周期&#xff0c;生命周期中的每一个环节对应构建过程中的一个操作。 …...

编程日记 2023/2/12 7:55:58

宝鸡网站建设天伟网络/百度推广登录入口下载

Rsync文件同步的核心算法 文章出处:http://coolshell.cn/articles/7425.html#more-7425 rsync是unix/linux下同步文件的一个高效算法&#xff0c;它能同步更新两处计算机的文件与目录&#xff0c;并适当利用查找文件中的不同块以减少数据传输。rsync中一项与其他大部分类似程序…...

编程日记 2025/2/1 5:33:57

扫二维码直接进网站怎么做/有没有可以代理推广的平台

Android提供了调试工具被称为Dalvik Debug Monitor Server (DDMS)&#xff0c;工作原理如下&#xff1a; DDMS将搭建起IDE与测试终端(Emulator 或者connected device)的链接&#xff0c;它们应用各自独立的端口监听调试器的信息&#xff0c;DDMS可以实时监测到测试终端的连接情…...

编程日记 2025/2/1 4:20:27

wordpress面包屑/seo发包技术教程

我们在产品原型设计时&#xff0c;经常需要制作高保真原型&#xff0c;在视觉效果及交互体验上尽量与最终产品相近&#xff0c;以便向别人展示或者供用户调研时使用。移动平台的交互方式非常丰富&#xff0c;下面就像大家介绍几种iPhone上常用的交互动作在Axure中的实现方式。我…...

编程日记 2025/2/1 2:17:01

wordpress leravel/关于校园推广的软文

创建文件【vi】一、进入vi的命令vi filename :打开或新建文件&#xff0c;并将光标置于第一行首vi n filename &#xff1a;打开文件&#xff0c;并将光标置于第n行首vi filename &#xff1a;打开文件&#xff0c;并将光标置于最后一行首vi /pattern filename&#xff1a;打开…...

编程日记 2025/1/31 22:23:09

推荐几个高端大气上档次网站/怎么做市场营销和推广

项目框架的JS库集成了jQuery&#xff0c;Layout页面&#xff08;模板页面&#xff0c;类似ASP.NET的母版页&#xff09;中引用了这些JS&#xff0c;后来使用图表插件&#xff08;图表插件是基于jQuery的&#xff09;的时候&#xff0c;项目框架中的JS和图表插件有冲突&#xff…...

编程日记 2025/1/31 22:06:37

上海网站seo公司/官网站内推广内容

点击上方“iOS开发”&#xff0c;选择“置顶公众号” 关键时刻&#xff0c;第一时间送达&#xff01; 前言 经过两个多月的开发与调试,全民星跑1.0.1终于上线了,首先要感谢曲总和雷建民的技术支持.全民星跑作为一个以跑步计步为主要功能的软件,骚栋在开发过程中实在是遇到了不…...

编程日记 2025/1/31 21:39:20