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

Composition API(常用部分)

news 文章来源：https://blog.csdn.net/weixin_52799373/article/details/133418566 2025/1/12 6:21:58

1. Composition API(常用部分)

文档:

​ https://composition-api.vuejs.org/zh/api.html

1) setup

  • 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
  • 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

2) ref

  • 作用: 定义一个数据的响应式
  • 语法: const xxx = ref(initValue):
    • 创建一个包含响应式数据的引用(reference)对象
    • js中操作数据: xxx.value
    • 模板中操作数据: 不需要.value
  • 一般用来定义一个基本类型的响应式数据
<template><h2>{{count}}</h2><hr><button @click="update">更新</button>
</template><script>
import {ref
} from 'vue'
export default {/* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */// data () {//   return {//     count: 0//   }// },// methods: {//   update () {//     this.count++//   }// }/* 使用vue3的composition API */setup () {// 定义响应式数据 ref对象const count = ref(1)console.log(count)// 更新响应式数据的函数function update () {// alert('update')count.value = count.value + 1}return {count,update}}
}
</script>

3) reactive

  • 作用: 定义多个数据的响应式
  • const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
  • 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
  • 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
<template><h2>name: {{state.name}}</h2><h2>age: {{state.age}}</h2><h2>wife: {{state.wife}}</h2><hr><button @click="update">更新</button>
</template><script>
/* 
reactive: 作用: 定义多个数据的响应式const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象响应式转换是“深层的”：会影响对象内部所有嵌套的属性内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
*/
import {reactive,
} from 'vue'
export default {setup () {/* 定义响应式数据对象*/const state = reactive({name: 'tom',age: 25,wife: {name: 'marry',age: 22},})console.log(state, state.wife)const update = () => {state.name += '--'state.age += 1state.wife.name += '++'state.wife.age += 2}return {state,update,}}
}
</script>

4) 比较Vue2与Vue3的响应式(重要)

vue2的响应式

  • 核心:
    • 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
    • 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
Object.defineProperty(data, 'count', {get () {}, set () {}
})
  • 问题
    • 对象直接新添加的属性或删除已有属性, 界面不会自动更新
    • 直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}

Vue3的响应式

  • 核心:
    • 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等…
    • 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作
    • 文档:
      • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
      • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
new Proxy(data, {// 拦截读取属性值get (target, prop) {return Reflect.get(target, prop)},// 拦截设置属性值或添加新属性set (target, prop, value) {return Reflect.set(target, prop, value)},// 拦截删除属性deleteProperty (target, prop) {return Reflect.deleteProperty(target, prop)}
})proxy.name = 'tom'   

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"

相关文章：

Composition API(常用部分)

1. Composition API(常用部分) 文档: ​ https://composition-api.vuejs.org/zh/api.html 1) setup 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用2) ref 作用: 定义一个数据的响应式语法: cons…...

编程日记 2023/10/1 12:43:11

驱动插入中断门示例代码

驱动插入中断描述符示例代码 最近做实验&#xff0c;每次在应用层代码写测试代码的时候都要手动挂一个中断描述符&#xff0c;很不方便所以就想着写个驱动挂一个中断门比较省事 驱动测试效果如下&#xff1a; 下面的代码是个架子&#xff0c;用的时候找个驱动历程传递你要插…...

编程日记 2023/10/1 12:40:07

1 论文笔记：Efficient Trajectory Similarity Computation with ContrastiveLearning

2022CIKM 1 intro 1.1 背景 轨迹相似度计算是轨迹分析任务&#xff08;相似子轨迹搜索、轨迹预测和轨迹聚类&#xff09;最基础的组件之一现有的关于轨迹相似度计算的研究主要可以分为两大类&#xff1a; 传统方法 DTW、EDR、EDwP等二次计算复杂度O(n^2)缺乏稳健性 会受到非…...

编程日记 2023/10/1 12:39:06

如何做一个基于 Python 的搜索引擎？

怎么做一个基于 python 的搜索引擎&#xff1f; 1、确定搜索引擎范围和目标用户 在决定做一个基于Python的搜索引擎之前&#xff0c;首先需要确定搜索引擎的范围和目标用户。搜索引擎的范围可以包括新闻、商品、音乐等&#xff0c;不同的领域需要不同的数据来源和处理方式。同…...

编程日记 2023/10/1 12:37:04

Python报错：KeyError: ‘820‘

Python报错&#xff1a;KeyError: ‘820’ 问题描述 原因 操作的表格列名是数字 NIRdata[820] Rdata[630]以上是出错行&#xff0c;dataframe的这种索引方式不支持用数字。 解决方案 先修改列名为字符 然后将出错行改为对应列名 NIRdata[nir] Rdata[r]...

编程日记 2023/10/1 12:35:02

【kubernetes】kubernetes中的Deployment使用

1 Why need Deployment? K8S中Pod是用户管理工作负载的基本单位&#xff0c;Pod通常通过Service进行暴露&#xff0c;因此&#xff0c;通常需要管理一组Pod&#xff0c;RC和RS主要就实现了一组Pod的管理工作&#xff0c;其中&#xff0c;RC和RS的区别在于&#xff0c;RS提供更…...

编程日记 2023/10/1 12:34:01

百度2024校招机器学习、数据挖掘、自然语言处理方向面试经历

本文介绍2024届秋招中&#xff0c;百度的机器学习/数据挖掘/自然语言处理工程师岗位一面的面试基本情况、提问问题、代码题目等。 8月初参与了百度提前批的机器学习/数据挖掘/自然语言处理工程师岗位面试&#xff0c;所在部门是搜索方向的。一面结束之后就知道凉了&#xff0c;…...

编程日记 2023/10/1 12:30:58

RabbitMQ原理(二)：SpringAMQP编程

文章目录 3.SpringAMQP3.1.导入Demo工程3.2.快速入门3.1.1.消息发送3.1.2.消息接收3.1.3.测试3.3.WorkQueues模型3.3.1.消息发送3.3.2.消息接收3.3.3.测试3.3.4.能者多劳3.3.5.总结3.4.交换机类型3.5.Fanout交换机3.5.1.声明队列和交换机3.5.2.消息发送3.5.3.消息接收3.5.4.总结…...

编程日记 2023/10/1 12:29:58

什么是SQL注入（SQL Injection）？如何预防它

什么是 SQL 注入&#xff08;SQL Injection&#xff09;&#xff1f;如何预防它&#xff1f; SQL注入&#xff08;SQL Injection&#xff09;是一种常见的网络安全漏洞&#xff0c;攻击者通过在应用程序的输入中插入恶意SQL代码来执行未经授权的数据库操作。SQL注入攻击可能导…...

编程日记 2023/10/1 12:27:56

metrology

创建模型&#xff1a;create_metrology_model 设置图像大小&#xff1a;set_metrology_model_image_size 添加测量模型&#xff1a;add_metrology_object_rectangle2_measure 设置对象参数&#xff1a;set_metrology_object_param 设置模型参数&#xff1a;set_metrology_model…...

编程日记 2023/10/1 12:25:54

UE学习记录06----根据Actor大小自适应相机位置

背景&#xff1a; staticMesh 会根据业务需要随时变化&#xff0c;然后通过staticMesh的大小自适应相机位置&#xff0c;捕捉画面用来预览该模型&#xff0c;使模型在画布中不会太大导致显示不全&#xff0c;也不会太小 参考&#xff1a; UE实现相机聚焦物体功能_右弦GISer的…...

编程日记 2023/10/1 12:23:53

Go-Python-Java-C-LeetCode高分解法-第八周合集

前言 本题解Go语言部分基于 LeetCode-Go 其他部分基于本人实践学习 个人题解GitHub连接&#xff1a;LeetCode-Go-Python-Java-C 欢迎订阅CSDN专栏&#xff0c;每日一题&#xff0c;和博主一起进步 LeetCode专栏 本文部分内容来自网上搜集与个人实践。如果任何信息存在错误,欢迎…...

编程日记 2023/10/1 12:20:49

数据结构--并查集

一、并查集的概念 并查集是一种树型的数据结构&#xff0c;用于处理一些不相交集合&#xff08;disjoint sets&#xff09;的合并及查询问题。常常在使用中以森林来表示。 最裸并查集&#xff1a; 合并元素a和元素b 所在的集合。查询元素a和元素b 是否属于同一组。是否在一个…...

编程日记 2023/10/1 12:19:48

Leetcode 224. 基本计算器

文章目录 题目代码&#xff08;10.1 首刷看解析&#xff09; 题目 Leetcode 224. 基本计算器 代码&#xff08;10.1 首刷看解析&#xff09; class Solution { public:int calculate(string s) {stack<int> sk; // 存储正负号sk.push(1);int sign 1;int res 0;int i…...

编程日记 2023/10/1 12:13:43

Linux基础命令汇总

用户管理 su 切换用户&#xff1a;su 用户名 logname 显示当前用户的登录用户名&#xff1a;logname useradd 创建用户&#xff1a;useradd 用户名创建用户时指定用户的主组&#xff1a;useradd -g 组名 用户名 usermod 添加附属组&#xff1a;usermod -G 组…...

编程日记 2023/10/1 12:11:40

JAVA 获得特定格式时间

0 背景 我们有时要获取时间&#xff0c;年月日时分秒周几&#xff0c;有时要以特定的格式出现。这时就要借助 SimpleDateFormat 或者 DateTimeFormatter。有时要某个月份有多少天需要借助 Calendar。所以有必要了解一些知识。 1 SimpleDateFormat simpledateFormat 线程不安全…...

编程日记 2023/10/1 12:05:33

问题： 视频颜色问题，偏绿

参考 什么是杜比视界&#xff1f; - https://www.youtube.com/watch?vldXDQ6VlC7g 【哈士亓说】07&#xff1a;HDR、杜比视界究竟是个啥&#xff1f;为什么这个视频还不是HDR视频&#xff1f; - https://www.youtube.com/watch?vrgb9Xg3cJns 正文 视频应该是 杜比视界 电…...

编程日记 2023/10/1 12:04:32

智能文字识别技术——AI赋能古彝文保护

前言 人工智能在古彝文古籍保护方面具有巨大的潜力和意义。通过数字化、自动化和智能化的手段&#xff0c;可以更好地保护和传承古彝文的文化遗产&#xff0c;促进彝族文化的传承和发展。 文章目录 前言一、古彝文是什么&#xff1f;1.1古彝文的背景1.2古彝文古籍保护背景 二、…...

编程日记 2023/10/1 12:02:31

Linux压缩和解压命令大全：tar、gzip和zip完整教程

文章目录 linux中的压缩和解压命令简介什么是压缩和解压为什么要使用压缩和解压命令压缩命令tar命令创建.tar文件压缩目录压缩多个文件或目录 gzip命令压缩文件压缩后删除原文件压缩整个目录 zip命令创建.zip文件压缩文件或目录设置压缩级别 解压命令tar命令解压.tar文件解压到…...

编程日记 2023/10/1 12:01:29

Vue3 reactive和ref详解

reactive Vue3.0中的reactive reactive 是 Vue3 中提供的实现响应式数据的方法。在 Vue2 中响应式数据是通过 defineProperty 来实现的&#xff0c;在 Vue3 中响应式数据是通过 ES6 的 Proxy来实现的。reactive 参数必须是对象 (json / arr)如果给 reactive 传递了其它对象 默…...

编程日记 2023/10/1 12:00:28

jvs-rules（规则引擎）和jvs智能bi（自助式数据分析）9.22更新内容

规则引擎更新功能 新增: 1.新增节点匹配筛选 用于做多个条件的数据筛选&#xff0c;以便将符合条件的数据传递给下一个节点进行处理&#xff0c;通常用于实现复杂的查询逻辑。 2.复合变量节点新增判断条件选项说明 用户可以根据自己的需求&#xff0c;为复合变量节点添加不…...

编程日记 2023/10/1 11:58:25

Leetcode算法题练习（一）

目录 一、前言 二、移动零 三、复写零 四、快乐数 五、电话号码的字母组合 六、字符串相加 一、前言 大家好&#xff0c;我是dbln&#xff0c;从本篇文章开始我就会记录我在练习算法题时的思路和想法。如果有错误&#xff0c;还请大家指出&#xff0c;帮助我进步。谢谢&…...

编程日记 2023/10/1 11:57:24

Xilinx FPGA 7系列 GTX/GTH Transceivers (5）-- Aurora 8b10b 信号传输实战--小试牛刀

第一节：Xilinx FPGA 7系列 GTX/GTH Transceivers (1)–了解了GTX硬件的基础知识 第二节：IBERT GTX --通过Ibert IP测试链路通信 第三节：aurora 8b10b single lane 4byte–学习官方历程 第四节：aurora 8b10b single lane 4byte–修改官方例子，发收递增数。 GTX/GTH Transc…...

编程日记 2023/10/1 11:55:22

第三章：最新版零基础学习 PYTHON 教程（第七节 - Python 运算符—Python 成员身份和身份运算符）

Python 提供了两个成员资格运算符来检查或验证值的成员资格。它测试序列（例如字符串、列表或元组）中的成员资格。 in 运算符： “in”运算符用于检查序列中是否存在字符/子字符串/元素。如果在序列中找到指定元素，则求值为 True，否则求值为 False。例如， CSDNforCSDN 中…...

编程日记 2023/10/1 11:54:21

【Java 基础篇】Java 注解详解

在 Java 编程中&#xff0c;注解&#xff08;Annotation&#xff09;是一种元数据&#xff0c;它提供了关于程序代码的额外信息。注解不直接影响程序的执行&#xff0c;但可以在运行时提供有关程序的信息&#xff0c;或者让编译器执行额外的检查。 本文将详细介绍 Java 注解的…...

编程日记 2023/10/1 11:53:20

MVVM框架下两窗口的消息传递

副窗口关闭的时候将bool类型传递出去 var message new CloseWindowMessage {MedicineView_DialogResult true }; //CloseWindowMessage是存储bool类型的标记类 Messenger.Default.Send(message); 主窗体中添加关闭处理的方法 private void HandleCloseWindowMessage(Clo…...

编程日记 2023/10/1 11:52:18

ROS2 从头开始​​：第6部分 - ROS2 中的 DDS，用于可靠的机器人通信

一、说明 在这篇文章中，我们将重点关注 ROS 2的通信栈DDS，其中这是介于管理节点通信与控制节点通信环节，是上位机决策体系与下位机的控制体系实现指令-执行-反馈的关键实现机制。 二、ROS工程的概念框架 现代机器人系统非常复杂，因为需要集成各种类型的传感器、执行器和其…...

编程日记 2023/10/1 11:50:17

WebSocket的那些事（6- RabbitMQ STOMP目的地详解）

目录 一、目的地类型二、Exchange类型目的地三、Queue类型目的地四、AMQ Queue类型目的地五、Topic类型目的地 一、目的地类型 在上节 WebSocket的那些事&#xff08;5-Spring STOMP支持之连接外部消息代理&#xff09;中我们已经简单介绍了各种目的地类型&#xff0c;如下图&…...

编程日记 2023/10/1 11:49:15

SQL SELECT 语句基础

在数字化的世界中，数据已经成为了一种无处不在的资源。从游戏开发到商业智能，数据分析都是不可或缺的一部分。SQL（结构化查询语言）是一种用于与数据库进行交互的编程语言，而SELECT 语句则是其中最基础也最常用的查询方式。 本文将通过对《三国志》游戏的角色数据进行分析…...

编程日记 2023/10/1 11:48:13

golang工程——protobuf使用及原理

相关文档 源码&#xff1a;https://github.com/grpc/grpc-go 官方文档&#xff1a;https://www.grpc.io/docs/what-is-grpc/introduction/ protobuf编译器源码&#xff1a;https://github.com/protocolbuffers/protobuf proto3文档&#xff1a;https://protobuf.dev/programmin…...

编程日记 2023/10/1 11:46:11

有域名了 怎么做网站/seo建设

如果你频繁的在你的系统中安装/卸载&#xff0c;那么不时的清理一下你的系统是十分必要的。 在Ubuntu终端中执行如下命令&#xff1a;sudo apt-get autoremove屏幕输出是这个样子的&#xff1a; Reading package lists… DoneBuilding dependency treeReading state informatio…...

编程日记 2025/1/12 2:22:15

福州执业建设中心网站/电子商务网站推广

不添加不需要的上下文如果你的类名或对象名称有具体的含义&#xff0c;请不要重复该变量的名称。差&#xff1a;<?php class Car{public $carMake;public $carModel;public $carColor;//...}好&#xff1a;<?php class Car{public $make;public $model;public $color;/…...

编程日记 2025/1/12 0:40:44

网站做乘法表/手机百度免费下载

在 Rss Bandit 和　SharpDevelop 之间的权衡 在 Rss Bandit 和　SharpDevelop 之间的权衡 &#xff08;心理变化过程&#xff0c;没有技术含量&#xff0c;只是胡诌&#xff0c;呵呵&#xff09; 距离上次的WebLog居然过了一个月有半&#xff0c;其实心理是一直希望可以经常写点…...

编程日记 2025/1/11 21:42:18

做网站建设需要/信息流优化

这次的 JDK 10 只是一个小版本更新&#xff0c;不过还是引入了一些非常重要的改变&#xff0c;我就挑几个对一般开发者影响重大的特性说说吧。Java 10 引入了局部变量类型推断&#xff0c;现在我们可以使用 var 替换局部变量声明时的类型部分&#xff0c;从而避免耗费精力去写出…...

编程日记 2025/1/11 17:04:06

网站做cpa推广引流/链接制作软件

$ \lim \limits_{x \rightarrow \infty}x^{\frac{3}{2}}(\sqrt {2x}-2\sqrt{1x}\sqrt{x}) $ 已知$ a_{n1}(a_n1)1, a_00 $,证明数列的极限存在&#xff0c;并且求出极限值 f(x)三次连续可微&#xff0c;令$ u(x,y,z)f(xyz) $, 求 $ \phi(t)\dfrac{ \partial^3 u}{\partial x \p…...

编程日记 2025/1/11 16:23:15

wordpress注册防骚挠/网站定制设计

什么是容器 容器是指容纳其他物品的工具&#xff0c;物体可以被放置在容器内&#xff0c;容器可以保护其中内容物&#xff1b; Linux容器发展之路 容器技术的概念最初出现在 2000 年&#xff0c;当时称为 FreeBSD jail&#xff0c;这种技术可将 FreeBSD 系统分区为多个子系统&a…...

编程日记 2025/1/11 5:29:07