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

Vue3的composition API—setup函数, ref函数,reactive函数

1、Setup 函数

1.setup 是vue3中的一个配置项
2、setup是所有组件所需要的数据和方法都需要配置到setup中的
3、setup两种返回值:
若返回一个对象 若返回一个渲染函数
mian.js文件

注意:尽量不与Vue2混用 setup中无法访问vue2中的配置
不能是async函数,因为返回值不再是return,而是promise,模板看不到return对象中的属性 被 promise包裹的对象

//引入的不再是vue构造函数,引入的是一个名为createAPP的工厂函数import { createApp } from 'vue'
import App from './App.vue'//创建应用实例对象--app(类似之前Vue2中的vm,但是app比vm更轻)
const app = createApp(App)
//挂载
app.mount('#app')/*const vm = new Vue({render:h=>h(App)
})
vm.$mount('#app')*/

App.vue文件

 <template><h1>个人信息</h1><h2>姓名:{{ name }}</h2><h2>姓名:{{ age }}</h2><h2>姓别:{{ sex }}</h2><button @click="sayhello">说话</button><br /><br /><button @click="sayWelcome">说话(vue2)</button>
</template><script>
// import { h } from "vue";
export default {name: "App",//此处不考虑响应式data() {return {sex: "男",};},methods: {sayWelcome() {alert("我叫${name},我${age}岁了,你好");},},setup() {//数据let name = "陈奇真";let age = 18;//方法function sayhello() {alert("我叫${name},我${age}岁了,你好");}//返回一个对象 常用return {name,age,sayhello,};//返回一个函数=>渲染函数// return()=>{h('h1','华农')}},
};
</script><style>
</style>

2.ref函数

作用:定义一个响应式的数据
语法 const xxx=ref(‘实例化的值’)
创建一个包含响应式的引用对象
JS中操作数据: xxx.value
模板中读取数据:不需要.value 直接 {{xxx}}

接收的数据类型:基本数据类型 对象类型
在这里插入图片描述

RefImpl 把一个数据变成响应式 用ref 引用对象

/响应式数据 数据变化时怎么响应到页面
import { ref } from "vue";
export default {name: "App",setup() {//数据let name = ref("陈奇真");let age = ref(18);//方法function changeInfo() {name.value = "郭雅琦";age.value = 19;}//返回一个对象 常用return {name,age,changeInfo,};

在模板template中不需要加name.value age.value 模板会自动识别
但是是setup中对配置的属性设置数据值时需要加name.value age.value

<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>

以上这些属性属于引用对象 ref对象
但是当层级越多,即可不用 .value 直接把对象值转化为Proxy ES6中的语法

基本类型用ref

3.reactive函数

在这里插入图片描述
定义一个对象类型的响应式数据
const 代理对象= reactive(源对象)
返回一个代理对象(Proxy的实例对象,简称proxy对象)
reactive的响应是深层次的,内部是基于ES6的Proxy实现的

相关文章:

Vue3的composition API—setup函数, ref函数,reactive函数

1、Setup 函数 1.setup 是vue3中的一个配置项 2、setup是所有组件所需要的数据和方法都需要配置到setup中的 3、setup两种返回值&#xff1a; 若返回一个对象 若返回一个渲染函数 mian.js文件 注意&#xff1a;尽量不与Vue2混用 setup中无法访问vue2中的配置 不能是async函数…...

国外seo比较好的优化方法有哪些?

随着互联网的不断发展&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;变得越来越重要。 对于国外市场&#xff0c;Google搜索引擎是最为重要的搜索引擎之一&#xff0c; 因此在优化国外网站时&#xff0c;需要将Google SEO优化作为首要任务。 关键词研究和优化 在进行…...

【JavaEE进阶】——第一节.Maven国内源配置

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 操作步骤 1.打开项目配置界面&#xff08;当前项目配置&#xff09; 2.检查并配置国内源 3.再次打开项目配置界面&#xff08;新项目配置&#xff09; 4…...

dockerFile编写

dockerFile编写 语法参数 # DockerFile常用指令 USER # 指定运行的用户&#xff0c;一般不用配置 FROM # 拉取基础镜像&#xff0c;一切从这里开始构建 ARG # 构建参数&#xff0c;只能在dockerFile中使用, # eg: JAR_FILEtarget/springboot-mongo-0.0.1-SNAPSHOT.jar MAI…...

jenkins扩展你的流水线

文章目录一、概述二、可信库和不可信库可信库不可信库三、内部库与外部库内部库SSH访问HTTP 访问外部库配置一个外部库四、在流水线脚本中使用库从源码版本控制中自动下载库加载库到脚本中Library 注解库步骤库指令五、Jenkins 项目中的库范围六、共享库代码的结构src示例一&am…...

Golang模糊测试入门

本教程介绍了 Go 中模糊测试的基础知识。通过模糊测试,随机数据会针对您的测试运行,以试图找到漏洞或导致崩溃的输入。可以通过模糊测试发现的一些漏洞示例包括 SQL 注入、缓冲区溢出、拒绝服务和跨站点脚本攻击。 在本教程中,您将为一个简单的函数编写模糊测试,运行 go 命…...

ARM uboot 的移植4 -从 uboot 官方标准uboot开始移植

一、添加DDR初始化1 1、分析下一步的移植路线 (1) cpu_init_crit 函数成功初始化串口、时钟后&#xff0c;转入 _main 函数&#xff0c;函数在 arch/arm/lib/crt0.S 文件中。 (2) 在 crt0.S 中首先设置栈&#xff0c;将 sp 指向 DDR 中的栈地址&#xff1b; #if defined(CONF…...

不用索引怎么优化百亿数据? | MySQL性能优化篇

文章目录数据库调优一、数据库调优原理1.1 为什么要进行MySQL数据库调优&#xff1f;1.2 什么影响数据库性能&#xff1f;1.3 数据库调优到底调什么&#xff1f;二、数据库压力测试2.1 什么是压测&#xff1f;2.2 JMeter简介2.3 驱动下载2.4 测试过程三、连接池3.1 压力测试连接…...

JavaScript(WebAPI)

目录 1.什么是Web API? 2.DOM和DOM树 3.获取元素 4.事件 5.操作元素 获取/修改元素内容 1.innerText 2. innerHTML 获取/修改元素属性 获取/修改表单元素属性 获取/修改样式属性 1.修改内联样式 2.修改元素应用的CSS类名 6.操作节点 新增节点 删除节点 7.案例…...

idea集成GitHub

设置 GitHub 账号绑定账号有两种方式&#xff1a;1. 通过授权登录2.如果上述登录不成功&#xff0c;用Token口令的方式登录&#xff0c;口令在github账号哪里生成&#xff0c;点击settings --->Developer settings --->pwrsonal access tokens ----> 复制口令到idea 口…...

软考高级信息系统项目管理师系列之四十一:项目组合管理

软考高级信息系统项目管理师系列之四十一:项目组合管理 一、项目组合管理内容二、项目组合管理基础概述1.项目组合定义及相关知识图2.项目组合、项目集和项目之间的关系3.项目组合模块具备的特征三、项目组合管理1.项目组合管理定义及要求2.不同级别管理之间的特性及关联3.项目…...

Spring——Spring整合Mybatis(XML和注解两种方式)

框架整合spring的目的:把该框架常用的工具对象交给spring管理&#xff0c;要用时从IOC容器中取mybatis对象。 在spring中应该管理的对象是sqlsessionfactory对象&#xff0c;工厂只允许被创建一次&#xff0c;所以需要创建一个工具类&#xff0c;把创建工厂的代码放在里面&…...

【专项训练】布隆过滤器和LRU缓存

布隆过滤器:与哈希表类似 哈希表是一个没有误差的数据结构! 有哈希函数得到index,会把要存的整个元素放在哈希表里面 有多少元素,每个元素有多大,所有的这些元素需要占的内存空间,在哈希表中都要找相应的内存大小给存起来 事实上,我们并不需要存所有的元素本身,而是只…...

从一道面试题看 TCP 的吞吐极限

分享一个 TCP 面试题&#xff1a;单条 TCP 流如何打满香港到旧金山的 320Gbps 专线&#xff1f;(补充&#xff0c;写成 400Gbps 更具迷惑性&#xff0c;但预测大多数人都会跑偏&#xff0c;320Gbps 也就白给了) 这个题目是上周帮一个朋友想的&#xff0c;建议他别问三次握手&a…...

rsync 的用法

rsync 介绍下 用法 rsync是一个常用的数据同步工具&#xff0c;它能够在本地和远程系统之间同步文件和目录。以下是rsync的基本用法&#xff1a; 同步本地文件夹&#xff1a; bash Copy code rsync -av /path/to/source /path/to/destination其中&#xff0c;-a表示归档模式&…...

【LeetCode每日一题:[面试题 17.05] 字母与数字-前缀和+Hash表】

题目描述 给定一个放有字母和数字的数组&#xff0c;找到最长的子数组&#xff0c;且包含的字母和数字的个数相同。 返回该子数组&#xff0c;若存在多个最长子数组&#xff0c;返回左端点下标值最小的子数组。若不存在这样的数组&#xff0c;返回一个空数组。 示例 1: 输入…...

华为OD机试题 - 简易压缩算法(JavaScript)| 机考必刷

更多题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库,搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库,搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解:简易压缩算法题目输入输出示例一输入输出说明示例二输入输出说明…...

Kubenates中的日志收集方案ELK(下)

1、rpm安装Logstash wget https://artifacts.elastic.co/downloads/logstash/logstash-6.8.7.rpm yum install -y logstash-6.8.7.rpm2、创建syslog配置 input {beats{port> 5044 } }output {elasticsearch {hosts > ["http://localhost:9200"]index …...

LeetCode - 42 接雨水

目录 题目来源 题目描述 示例 提示 题目解析 算法源码 题目来源 42. 接雨水 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例1 输入&…...

python --生成时间序列,作为横轴的标签。时间跨越2008-2022年,生成每年的6-10月的第一天作为时间序列

python 生成制定的时间序列作为绘图时x轴的标签 问题需求 在绘图时&#xff0c;需要对于x轴的标签进行专门的设置&#xff0c;整体时间跨越2008年-2022年&#xff0c;将每年的6-10月的第一天生成一条时间序列&#xff0c;绘制成图。 解决思路 对于时间序列的生成&#xff0…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...