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

Vue3.0 一些总结 【持续更新】

1. reactive 只适用于对象 (包括数组和内置类型,如 Map 和 Set,它不支持如 string、number 或 boolean 这样的原始类型)

import { reactive } from 'vue'const counter = reactive({count: 0
})console.log(counter.count) // 0
counter.count++

注意:不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,必须始终保持对响应式对象的相同引用。不能轻易地“替换”响应式对象,因为这样的话与第一个引用的响应性连接将丢失:

js
let state = reactive({ count: 0 })// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失!)
state = reactive({ count: 1 })
对解构操作不友好:当我们将响应式对象的原始类型属性解构为本地变量时,或者将该属性传递给函数时,我们将丢失响应性连接:js
const state = reactive({ count: 0 })// 当解构时,count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)

解构时也会失去响应式,可以使用toRefs 去转成响应式

2. toRefs

将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
消费者组件可以解构/展开返回的对象而不会失去响应性

const state = reactive({foo: 1,bar: 2
})
return {...toRefs(state)
}

注意toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref,请改用 toRef

3. ref() 则可以接受任何值类型。ref 会返回一个包裹对象,并在 .value 属性下暴露内部值

import { ref } from 'vue'const message = ref('Hello World!')console.log(message.value) // "Hello World!"
message.value = 'Changed'

4. computed

  • 接受一个 getter 函数,返回一个只读的响应式 ref 对象
  const count = ref(1)const plusOne = computed(() => count.value + 1)console.log(plusOne.value) // 2
  • 也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象
const count = ref(1)
const plusOne = computed({get: () => count.value + 1,set: (val) => {count.value = val - 1}
})plusOne.value = 1
console.log(count.value) // 0

5. 路由独享守卫 beforeEnter

  {path: '/',name: 'Home',component: Home,beforeEnter: (to, form, next) => { // 路由独享守卫console.log(to, '路由独享守卫');next()}},

6. 得到路由信息 vue3/vue2 区别

vue3
import { useRouter, useRoute } from 'vue-router'
export default {setup() {let router = useRouter(); // router是全局路由实例,是VueRouter实例  let route = useRoute(); // route对象表示当前的路由信息,包含了当前URL解析得到的信息,还有URL匹配到的路由记录console.log(router, route, 'router')router.push('/home') //路由跳转}}vue2
this.$route.params
this.$router.push({path: '/home'params: {id: 1}
})
this.$route.query
this.$router.push({path: '/home'query: {id: 1}
})

7. ref() 获取dom

<template><div class="home"><input type="text" ref="input"></div>
</template>import { ref } from "vue";const input = ref();
console.log(input, 'input')

在这里插入图片描述

相关文章:

Vue3.0 一些总结 【持续更新】

1. reactive 只适用于对象 (包括数组和内置类型&#xff0c;如 Map 和 Set&#xff0c;它不支持如 string、number 或 boolean 这样的原始类型) import { reactive } from vueconst counter reactive({count: 0 })console.log(counter.count) // 0 counter.count注意&#xf…...

C++语法|对象的浅拷贝和深拷贝

背景&#xff1a; 我们手写一个顺序栈&#xff0c;展开接下来的实验&#xff1a; ⭐️ this指针指向的是类在内存中的起始位置 class SeqStack { public:SqeStack(int size 10) {cout << this << "SeqStack()" << endl;pstack_ new int[size_];t…...

行为型模式

模板方法模式 #include<iostream> #include<string> using namespace std;/*案例&#xff1a;写简历内容&#xff1a;最近有个招聘会&#xff0c;可以带上简历去应聘了。但是&#xff0c;其中有一家公司不接受简历&#xff0c;而是给应聘者发了一张简历表&#xf…...

AI大模型日报#0515:Google I/O大会、 Ilya官宣离职、腾讯混元文生图大模型开源

导读&#xff1a;欢迎阅读《AI大模型日报》&#xff0c;内容基于Python爬虫和LLM自动生成。目前采用“文心一言”&#xff08;ERNIE 4.0&#xff09;、“零一万物”&#xff08;Yi-34B&#xff09;生成了今日要点以及每条资讯的摘要。 《AI大模型日报》今日要点&#xff1a;谷歌…...

计算机网络-负载均衡算法

计算机网络中的负载均衡算法是决定如何将请求分发到各个服务器的关键。目前负载均衡算法主要分为静态负载均衡算法和动态负载均衡算法&#xff0c;具体包括以下几种&#xff1a; 静态负载均衡算法&#xff1a; 1.轮询法&#xff08;Round Robin&#xff09;&#xff1a;按照顺…...

Excel Module: Iteration #1 EasyExcel生成下拉列表模版时传入动态参数查询下拉数据

系列文章 EasyExcel生成带下拉列表或多级级联列表的Excel模版自定义校验导入数据(修订) 目录 系列文章前言仓库一、实现1.1 下拉元数据对象1.2 构建下拉元数据的映射关系1.3 框架方式1.3.1 框架实现1.3.2 框架用例模版类加载下拉业务导出接口 1.4 EasyExcel方式1.4.1 EasyExce…...

【回溯算法】【Python实现】TSP旅行售货员问题

文章目录 [toc]问题描述回溯算法Python实现时间复杂性 问题描述 给定一组城市和它们之间的距离矩阵&#xff0c;找到一条距离最短的路径&#xff0c;使得旅行商从一个城市出发&#xff0c;经过所有城市恰好一次&#xff0c;并最终回到出发城市 回溯算法 旅行售货员问题的解空间…...

Java处理xml

Java处理xml DOM&#xff08;Document Object Model&#xff09;读取写入参考文献[Java DOM 教程](https://geek-docs.com/java/java-tutorial/dom.html#ftoc-heading-5) DOM&#xff08;Document Object Model&#xff09; Java的DOM&#xff08;Document Object Model&#…...

软考中级-软件设计师 (十一)标准化和软件知识产权基础知识

一、标准化基础知识 1.1标准的分类 根据适用的范围分类&#xff1a; 国际标准指国际化标准组织&#xff08;ISO&#xff09;、国际电工委员会&#xff08;IEC&#xff09;所制定的标准&#xff0c;以及ISO所收录的其他国际组织制定的标准。 国家标准&#xff1a;中华人民共和…...

pytest教程-46-钩子函数-pytest_sessionstart

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了pytest_report_testitemFinished钩子函数的使用方法&#xff0c;本小节我们讲解一下pytest_sessionstart钩子函数的使用方法。 pytest_sessionstart 是 Pytest 提供的一个钩子函数&#xff0c…...

Windows内核函数 - ASCII字符串和宽字符串

本章介绍了Windows内核中字符串处理函数、文件读写函数、注册表读写函数。这些函数是DDK提供的运行时函数&#xff0c;他们比标准C语言的运行时函数功能更丰富。普通的C语言运行时库是不能在内核模式下使用的&#xff0c;必须使用DDK提供的运行时函数。 和应用程序一样&#xf…...

从零开始学习MySQL 事务处理

事务处理与ACID特性 事务是数据库操作的基本单元&#xff0c;它确保一组操作要么全部成功&#xff0c;要么全部失败&#xff0c;以此来维护数据库的一致性。这四个字母缩写ACID代表了事务的四大特性&#xff1a; 原子性&#xff08;Atomicity&#xff09;**&#xff1a;事务被…...

字符数组以及字符串相关的几个函数

一.字符数组 1.定义&#xff1a;格式如下 char a[10]; //此处就表示定义了一个长度为10的字符数组 2.引用&#xff1a; 也和其余的数组一样&#xff0c;是下标引用。 3.初始化&#xff1a; 如下代码为字符数组初始化的几种情况&#xff1a; int main() {char arr[5] {…...

AOP面向切面编程

1&#xff0c;注入依赖 <!--web--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</grou…...

C# WinForm —— 15 DateTimePicker 介绍

1. 简介 2. 常用属性 属性解释(Name)控件ID&#xff0c;在代码里引用的时候会用到,一般以 dtp 开头Format设置显示时间的格式&#xff0c;包含Long&#xff1a; Short&#xff1a; Time&#xff1a; Custom&#xff1a;采用标准的时间格式 还是 自定义的格式CustomFormat自定…...

SpringBoot中六种批量更新Mysql 方式效率对比

SpringBoot中六种批量更新Mysql 方式效率对比 先上结论吧,有空可以自测一下,数据量大时运行一次还时挺耗时的 效率比较 小数据量时6中批量更新效率不太明显,根据项目选择合适的即可,以1万条为准做个效率比较,效率从高到低一次排名如下 replace into和ON DUPLICATE KEY效率最…...

【SpringBoot】SpringBoot整合jasypt进行重要数据加密

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 目录 &#x1f4d5;jasypt简介 &#x1f525;SpringBoot使用jasypt &#x1f4c2;创建我需要的数据库文件 &#x1f4d5;引入依赖 &#x1f513;配置数据库文件&#xff08;先不进行加密&#xff09; &#x1f319;创…...

【Go语言入门学习笔记】Part1.梦开始的地方

一、前言 经过一系列的学习&#xff0c;终于有时间来学习一些新的语言&#xff0c;Go语言在现在还是比较时髦的&#xff0c;多一个技能总比不多的好&#xff0c;故有时间来学一下。 二、配置环境 按照网络中已有的配置方法配置好&#xff0c;本人采用了Jetbrain的Goland&#…...

数据特征降维 | 主成分分析(PCA)附Python代码

主成分分析(Principal Component Analysis,PCA)是一种常用的数据降维技术和探索性数据分析方法,用于从高维数据中提取出最重要的特征并进行可视化。 PCA的基本思想是通过线性变换将原始数据投影到新的坐标系上,使得投影后的数据具有最大的方差。这些新的坐标轴称为主成分…...

当服务实例出现故障时,Nacos如何处理?

当服务实例出现故障时&#xff0c;Nacos的应对策略 在微服务架构日益盛行的今天&#xff0c;服务之间的稳定性与可靠性成为了我们架构师们不得不面对的重要课题。尤其是在面对服务实例出现故障时&#xff0c;如何确保整个系统的稳定运行&#xff0c;成为了我们首要考虑的问题。…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

大数据驱动企业决策智能化的路径与实践

&#x1f4dd;个人主页&#x1f339;&#xff1a;慌ZHANG-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、引言&#xff1a;数据驱动的企业竞争力重构 在这个瞬息万变的商业时代&#xff0c;“快者胜”的竞争逻辑愈发明显。企业如何在复杂环…...