Vue3高频知识点和写法

一 Vue插件

二 vue3项目创建

创建完成后npm install

npm run dev

三 setup

一 响应式数据

 setup函数是用来代替data和methods的写法的,在setup函数中声明的数据和函数,导出后可以在页面中使用。 但是暂时不是响应式数据,如果要响应式数据的话,必须使用ref和reactive setup函数是没有this的,直接使用就行

setup(){let data = 1; function setdata(){ data = 2 //这样修改不是响应式的,页面不会改变}return {data,setdata}
}
setup(){let data = ref(1); function setdata(){ data.value = 2 //这样修改才是响应式的}return {data,setdata}
}

二 setup和optionAPI

setup执行是最先执行的生命周期,访问不到其他的内容,但是data中能访问到setup中的内容。

 四 toRefs和toRef

想要解构就使用toRefs

toRefs的作用就是由于解构了以后,重新声明变量取的里面的值,跟代理对象无关,所以失去了响应性,toRefs可以使得解构出来的变量都变成ref对象,从而具有响应性。变量通过.value访问。并且修改name的时候,也会修改到person.name

五 computed计算属性

let 变量 = computed(传入回调函数并返回一个值)

计算属性是有缓存的,如果所依赖的值没有变化,即使有多个地方用到这个属性,也不会调用计算的方法;但是普通的方法是想要用到值就必须调用这个方法。

 计算属性想要设置的话,必须要修改它依赖的值

六 watch和watchEffect

所以,总结一下:最好用ref定义对象。重新赋值时才方便。要监听对象里的属性值,必须开启deep:true

1 监听ref定义的值(常用)

watch(监听数据,传入回调函数function(newValue,oldValue){})

2 监听ref定义的对象:监听整个对象的地址值,需要开启深度监听,才能知道属性变化

监听的是整个对象的地址值。 需要手动开启深度监听,才能够监听到里面属性的变化。

修改整个对象的地址值,那么新值和旧的值肯定是不一样的。

但是要是修改的是对象的属性,地址没有发生改变,那么新的属性值和旧的属性值,都是同一个对象里的属性,就都是一样的。

3 监听reactive定义的对象:不管是地址值,还是属性,都能够监测到。

reactive定义的对象,重新赋值时要注意。最好还是用ref就好了。

//如果reactive定义的对象,
let person = reactive({name:'张三',age:'12'})
//修改的时候是这样的话,就会失去响应性。
person = {name:"张三",age:18}
//只能批量替换对象里面的属性
Object.assign(person,{age:20})//不像是ref定义的对象。这样修改不会失去响应性
let person =  ref({name:"nihao"})
person.value = {age:'haha;}

 4 监听对象里的属性值,最好都用函数返回属性的形式。(常用)

并且,如果属性是对象,要加deep:true监听对象里的属性的变化。

 5 监视多个值时,不用写数组,直接使用watchEffect。函数中用到的值都会自动监听到。

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

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

相关文章

C++笔记1:操纵符输入输出

C操纵符用来控制输出控制,一是输出的形式,二是控制补白的数量和位置。本文记录一下,在一些笔试的ACM模式可能有用。其中1-4节的部分是关于格式化输入输出操作,5-6节的部分是关于未格式化输入输出操作。 1. 控制布尔值的格式 一般…

C语言—基础数据类型(含进制转换)

进制转换不多,但我觉得适合小白(我爱夸自己嘿嘿) 练习 1. 确认基础类型所占用的内存空间(提示:使用sizeof 运算符): 在这里我说一下,long 类型通常占用 4 字节。在 64 位系统上,long 类型通常也可为 8 字节。 格式…

LeetCode、208. 实现 Trie (前缀树)【中等,自定义数据结构】

文章目录 前言LeetCode、208. 实现 Trie (前缀树)【中等,自定义数据结构】题目链接与分类思路 资料获取 前言 博主介绍:✌目前全网粉丝2W,csdn博客专家、Java领域优质创作者,博客之星、阿里云平台优质作者、专注于Java后端技术领…

【ASP.NET Core 基础知识】--测试--单元测试和集成测试

一、单元测试 1.1 单元测试概述 单元测试是软件开发中的一种测试方法,用于验证软件中的最小可测试单元——通常是函数、方法或类——的行为是否符合预期。它的核心思想是将程序分解成独立的单元,并针对每个单元编写测试用例,以验证其功能是…

假期day9(2024/2/14)

获取数据库查询的值并调用值使用函数:sqlite3_get_table 在回调函数中获取数据库查询值,无法在其他函数调用:使用函数sqlite3_exec(db, sql, select_callback, &flag, &errmsg) 创建表 create table if not exists 表名…

力扣代码学习日记一

Problem: 389. 找不同 文章目录 思路解题方法复杂度Code 思路 给定两个字符串 s 和 t ,它们只包含小写字母。 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。 示例 1: 输入:s "a…

c++ 自定义Logger 日志类

Logger 日志类 线程安全的日志组件 默认保存到文件&#xff0c;并支持回调函数&#xff0c;比如显示到界面 #ifndef LOGGER_H #define LOGGER_H#include <iostream> #include <sstream> #include <mutex> #include <thread> #include <iomanip&g…

低资源学习与知识图谱:构建与应用

目录 前言1 低资源学习方法1.1 数据增强1.2 特征增强1.3 模型增强 2 低资源知识图谱构建与推理2.1 元关系学习2.2 对抗学习2.3 零样本关系抽取2.4 零样本学习与迁移学习2.5 零样本学习与辅助信息 3 基于知识图谱的低资源学习应用3.1 零样本图像分类3.2 知识增强的零样本学习3.3…

云原生介绍与容器的基本概念

云原生介绍 1、云原生的定义 云原生为用户指定了一条低心智负担的、敏捷的、能够以可扩展、可复制的方式最大化地利用云的能力、发挥云的价值的最佳路径。 2、云原生思想两个理论 第一个理论基础是&#xff1a;不可变基础设施。 第二个理论基础是&#xff1a;云应用编排理…

备战蓝桥杯---图论基础理论

图的存储&#xff1a; 1.邻接矩阵&#xff1a; 我们用map[i][j]表示i--->j的边权 2.用vector数组&#xff08;在搜索专题的游戏一题中应用过&#xff09; 3.用邻接表&#xff1a; 下面是用链表实现的基本功能的代码&#xff1a; #include<bits/stdc.h> using nam…

纪念一下 开始写博客两周以来第一次入围榜单

两周里 创作博客 第一次进入热榜 虽然只有几十名 但也算是一个突破 确实没想到自己随便做的笔记就入围了 感谢各位大佬的支持&#xff01;继续进步&#xff01;&#x1f973;&#x1f973;&#x1f973;

ubuntu下conda如何设置镜像源(清华镜像源)

ubuntu下如何设置镜像源 首先贴出.condarc&#xff0c;直接给出清华的镜像源&#xff0c;需要的小伙伴直接使用&#xff0c;别看内容了 # ~/.condarc channels:- https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/r- https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs…

服务流控(Sentinel)

引入依赖 <!-- 必须的 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency><!-- sentinel 核心库 --> <dependency><groupId>com.ali…

权限系统设计

权限系统设计 RBAC 基于角色的访问控制 ABAC 基于属性的访问控制 普通的系统无非 CRUD&#xff0c;那系统如何控制一个用户该看到哪些数据、能操作哪些功能&#xff1f;日常开发中最常用到 RBAC 和 OAuth2 这两种访问控制和授权方案 RBAC 基于角色的访问控制 所有的访问控制模…

GoZero 微服务个人探究之路(十一)编写sql语句所用到的sqlx包

前言 使用go-zero的脚手架工具goctl生成数据库代码时候&#xff0c;我们发现goctl引入了sqlx这个包来进行sql操作&#xff0c;本文旨在对sqlx包进行整理&#xff0c;来方便我们使用go-zero&#xff0c;sqlx进行sql操作 Why sqlx 为什么要额外引入sqlx包&#xff0c;增加复杂…

力扣精选算法100道——【模板】前缀和 (二维)

目录 &#x1f388;题目解析 &#x1f388;算法原理 &#x1f388;实现代码 二维前缀和【模板】 &#x1f388;题目解析 上一题我们讲述了一维的前缀和求法。 第一行三个参数&#xff0c;n是行数3&#xff0c;m是列数4&#xff0c;q3代表查询次数 接下来就是n行m列的矩阵…

基于python混沌系统敏感文本信息加密算法的研究与实现,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

【Python】洛谷P7614 [COCI2011-2012#2] NAJBOLJIH 5

P7614 [COCI2011-2012#2] NAJBOLJIH 5 题目描述 给定 8 8 8 个数字 X 1 , X 2 , . . . , X 8 X_1,X_2,...,X_8 X1​,X2​,...,X8​&#xff0c;从中选出 5 5 5 个数字&#xff0c;使得这 5 5 5 个数字的总和最大。输出这 5 5 5 个数字的和以及它们的编号。 X i X_i Xi​…

微服务OAuth 2.1认证授权Demo方案(Spring Security 6)

文章目录 一、介绍二、auth微服务代码1. SecurityConfig2. UserDetailsService3. 总结 三、gateway微服务代码1. 统一处理CORS问题 四、content微服务代码1. controller2. SecurityConfig3. 解析JWT Utils4. 总结 五、一些坑 书接上文 微服务OAuth 2.1认证授权可行性方案(Sprin…

【51单片机】串口(江科大)

8.1串口通信 1.串口介绍 2.硬件电路 3.电平标准 电平标准是数据1和数据0的表达方式,是传输线缆中人为规定的电压与数据的对应关系,串口常用的电平标准有如下三种: 电平标准是数据1和数据O的表达方式,是传输线缆中人为规定的电 压与数据的对应关系,串口常用的电平标准有如下…