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

学习vue3的笔记

一、vue和react的对比

1、基础介绍

vue:https://cn.vuejs.org/

vue3是2020年创建的

react:https://react.dev/

react是一个2013年开源的JavaScript库,严格意义上来说不是一个框架

2、diff算法

两个框架采用的都是同级对比策略

两节点对比时

对比时的不同策略

vue3策略:找出最长递增子序列,首尾对比直到不同停止

比如下图时cd不变把b放到cd后面

react:节点的索引对比,从左往右移动

二、搭建VUE3的开发环境+初始vue3

1、node环境安装:https://nodejs.org/en/down (选择18以上的版本)

2、开发编辑工具Vscode(Visual Studio Code):https://code.visualstudio.com/Download

3、安装谷歌浏览器

三、创建Vue3项目(cmd运行)

1、切换镜像源

npm config set registry https://registry.npmmirror.com/

2、安装pnpm

npm install -g pnpm

如果淘宝镜像在下载过程中不行就切换回来官方的镜像,然后再切换回来淘宝(淘宝的 npm 镜像源可能存在证书过期的问题。您可以尝试将 npm 源切换回官方的 npm 源,然后重新安装依赖。)

npm config set registry https://registry.npmjs.org

3、实际上使用npm没有下载成功pnpm,是下载了cnpm之后,再使用cnpm下载的pnpm

npm install -g cnpm --registry=https://registry.npmmirror.comcnpm install -g pnpm

4、使用pnpm创建vue3文件

pnpm create vite

5、使用pnpm安装文件的包

pnpm i

6、启动文件

pnpm run dev

四、文件运行中学习代码新的知识

1、<script setup>实现模块化

vue2是选项式,vue3是模块化

选项式需要暴露很多,比如data{return }之类的,setup不需要

之后的代码都是在setup的情况下写的:https://cn.vuejs.org/api/sfc-script-setup.html#script-setup

2、ref,响应式数据

vue2的数据是放在data,vue3用ref https://cn.vuejs.org/api/reactivity-core.html#ref

3、v-cloak

如果不是通过官方语句脚手架创建的vue文件,只是普通的html文件然后引入就会造成的现象,正常通过官方语句创建的vue文件不会

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

会造成数据还没初始化就已经渲染了,造成页面数据闪烁,加入v-cloak就不会:https://cn.vuejs.org/api/built-in-directives.html#v-cloak

4、nextTick

5、ref和reative的区别

https://cn.vuejs.org/api/reactivity-core.html#reactive

6、计算属性computed

https://cn.vuejs.org/api/reactivity-core.html#computed 和vue2的写法不一样

使用缓存,减少性能消耗

<script setup>
import { ref,computed } from 'vue';const list=ref({book:["语文","数学","英文"]
})const f=ref(0)
const l=ref(2)const listC=computed({get(){return f.value},set(newValue){[f.value,l.value]=newValue.split(" ")}})
listC.value='78'</script><template><div>是否也有书:</div><span>{{ listC }}</span>
</template>

使用computed是因为,如果模板更新,数据没有变化,可以直接拿computed的缓存数据不需要二次计算,如果直接写在模板会每一次刷新都会重新计算一次

相关文章:

学习vue3的笔记

一、vue和react的对比 1、基础介绍 vue&#xff1a;https://cn.vuejs.org/ vue3是2020年创建的 react&#xff1a;https://react.dev/ react是一个2013年开源的JavaScript库&#xff0c;严格意义上来说不是一个框架 2、diff算法 两个框架采用的都是同级对比策略 两节点对…...

MySQL UNION

关于《MySQL UNION》的操作&#xff0c;我查找到了一些有用的信息。 MySQL的UNION操作符用于将两个或多个SELECT语句的结果组合到一个结果集中&#xff0c;并去除重复的行。每个SELECT语句的列数和对应位置的数据类型必须相同。其基本语法格式如下&#xff1a; SELECT column…...

day21-ubuntu入门

小趣味docker 1.安装docker&#xff0c;从阿里云的yum yum install docker -y 2.需要提前准备好docker镜像&#xff0c;确保可用 docker -v 3.导入该游戏镜像&#xff08;先用systemctl start docker&#xff09; docker load < game_v2.tar 4.一条命令&#xff0c;在…...

开发小工具:ping地址

开发小工具&#xff1a;ping地址 import socketdef tcp_port_scan(ip,port):#创建套接字socksocket.socket(socket.AF_INET,socket.SOCK_STREAM)#设置超时sock.settimeout(0.2)try:#发请求result sock.connect_ex((ip,port))if result 0:print(f{ip}--{port}接口连接成功)res…...

在 Python 中使用 ADX 进行算法交易

在阅读本文前&#xff0c;可查阅以往文章: 技术指标-ATR 技术指标有几个分支&#xff0c;其中趋势指标使用最广泛。这些工具可帮助交易者确定市场趋势的方向和强度&#xff0c;使他们能够相应地调整交易。如果趋势指标得到有效应用&#xff0c;它们通常会产生积极的结果。 在…...

Unity 3D 从入门到精通:开启游戏开发的奇幻之旅

一、引言 在当今数字化的时代&#xff0c;游戏产业蓬勃发展&#xff0c;成为了全球娱乐领域的重要支柱。Unity 3D 作为一款功能强大、跨平台的游戏开发引擎&#xff0c;凭借其易用性、高效性和丰富的资源&#xff0c;吸引了无数开发者投身于游戏创作的世界。无论是独立开发者怀…...

神经网络-VggNet

2014年VggNet被推出&#xff0c;获取了ILSVRC2014比赛分类项目的第二名&#xff0c;第一名是GoogleNet&#xff0c;该网络在下节介绍&#xff0c;本节主要介绍VggNet。 VggNet可以称为是一个家族&#xff0c;根据层数的不同包括了A、A-LRN、B、C、D等网络结构&#xff0c;其中…...

用AI生成PPT,告别繁琐,一键生成高效方案

用AI生成PPT&#xff0c;告别繁琐&#xff0c;一键生成高效方案&#xff01;制作PPT曾经是一件非常繁琐的工作。让人又爱又恨&#xff0c;爱的是它可以让你的想法可视化&#xff0c;恨的是&#xff0c;要做出一份精美的PPT&#xff0c;往往需要耗费大量时间和精力。现在AI技术的…...

基于 `android.accessibilityservice` 的 Android 无障碍服务深度解析

基于 android.accessibilityservice 的 Android 无障碍服务深度解析 目录 引言无障碍服务概述架构设计核心功能设计模式核心要点实现细节性能优化安全与隐私案例分析未来展望结论引言 在当今的移动应用生态系统中,无障碍服务(Accessibility Service)扮演着至关重要的角色。…...

UE5材质节点Frac/Fmod

Frac取小数 Fmod取余数 转场效果 TimeMultiplyFrac很常用 Timesin / Timecos 制作闪烁效果...

【微服务】【Sentinel】认识Sentinel

文章目录 1. 雪崩问题2. 解决方案3. 服务保护技术对比4. 安装 Sentinel4.1 启动控制台4.2 客户端接入控制台 参考资料: 1. 雪崩问题 微服务调用链路中的某个服务故障&#xff0c;引起整个链路中的所有微服务都不可用&#xff0c;这就是雪崩。动图演示&#xff1a; 在微服务系统…...

Kafka 性能提升秘籍:涵盖配置、迁移与深度巡检的综合方案

文章目录 1.1.网络和io操作线程配置优化1.2.log数据文件刷盘策略1.3.日志保留策略配置1.4.replica复制配置1.5.配置jmx服务1.6.系统I/O参数优化1.6.1.网络性能优化1.6.2.常见痛点以及优化方案1.6.4.优化参数 1.7.版本升级1.8.数据迁移1.8.1.同集群broker之间迁移1.8.2.跨集群迁…...

小程序租赁系统构建指南与市场机会分析

内容概要 在当今竞争激烈的市场环境中&#xff0c;小程序租赁系统正崭露头角&#xff0c;成为企业转型与创新的重要工具。通过这个系统&#xff0c;商户能够快速推出自己的小程序&#xff0c;无需从头开发&#xff0c;节省了大量时间和资金。让我们来看看这个系统的核心功能吧…...

SOME/IP 协议详解——远程过程调用(RPC)

文章目录 1. 传输协议绑定1.1 UDP 绑定1.2 TCP 绑定1.3 多服务实例&#xff08;重要&#xff09;1.4 通过 UDP 传输大型 SOME/IP 消息&#xff08;SOME/IP - TP&#xff09; 2. 请求 / 响应通信3. Fire&Forget 通信4. 通知事件5. 字段6. 错误处理6.1 返回码6.2 错误消息6.3…...

C++ 设计模式:命令模式(Command Pattern)

链接&#xff1a;C 设计模式 链接&#xff1a;C 设计模式 - 访问者模式 命令模式&#xff08;Command Pattern&#xff09;是一种行为型设计模式&#xff0c;它将请求封装成一个对象&#xff0c;从而使你可以用不同的请求对客户进行参数化&#xff0c;对请求排队或记录请求日志…...

安卓/system/bin下命令中文说明(AI)

ATFWD-daemon&#xff1a;AT指令转发守护进程&#xff0c;用于将AT指令从应用层转发到调制解调器。 PktRspTest&#xff1a;数据包响应测试工具。 StoreKeybox&#xff1a;存储密钥盒工具&#xff0c;用于安全地存储加密密钥。 WifiLogger_app&#xff1a;WiFi日志记录应用&…...

MATLAB程序转C# WPF,dll集成,混合编程

工作中遇到一个需求&#xff0c;有一部分算法的代码需要MATLAB来进行处理&#xff0c;而最后需要集成到C#中的wpf项目中去&#xff0c;选择灵活性更高的dll&#xff0c;去进行集成。&#xff08;可以简单理解为&#xff1a;将MATLAB的函数&#xff0c;变为C#中类的函数成员&…...

【SpringBoot3】Spring Boot 3.0 集成 Mybatis Plus

文章目录 一、什么是 Mybatis Plus 特性 二、Spring Boot 3.0 集成 Mybatis Plus三、Mybatis Plus 查询示例 1、普通查询2、分页查询 参考 一、什么是 Mybatis Plus MyBatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只…...

nvidia_gpu_exporter 显卡监控

导入 grafana/dashboard.json https://github.com/utkuozdemir/nvidia_gpu_exporter/blob/master/grafana/dashboard.json参考 nvidia_gpu_exporter...

WebSocket 的封装使用

import { ElMessage } from "element-plus";// 全局WebSocket实例 let ws null; let isConnected false; let currentWsUrl ; // 用于存储当前的wsUrl let baseURL ws://XXX.com:8081;const initWebSocket (wsUrl, sendData) > {return new Prom…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...