当前位置: 首页 > 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…...

cv_resnet101_face-detection_cvpr22papermogface真实应用:社区门禁抓拍图自动人数统计

cv_resnet101_face-detection_cvpr22papermogface真实应用&#xff1a;社区门禁抓拍图自动人数统计 1. 项目简介 今天给大家介绍一个特别实用的工具——基于MogFace模型的高精度人脸检测系统。这个工具最大的特点就是能在本地电脑上快速准确地识别人脸&#xff0c;自动统计人…...

Java调用动态库总崩溃?从SIGSEGV日志反向定位到C端ABI兼容性缺陷——一线故障复盘(含GDB+Java Core联合调试全流程)

第一章&#xff1a;Java调用动态库总崩溃&#xff1f;从SIGSEGV日志反向定位到C端ABI兼容性缺陷——一线故障复盘&#xff08;含GDBJava Core联合调试全流程&#xff09;某金融风控系统在JDK 17 Alpine Linux&#xff08;musl libc&#xff09;环境下频繁触发 JVM Crash&#…...

【ESP32-S3】通过ROS2使用YDLIDAR X2进行SLAM、自主导航方案选择

通过ROS2使用YDLIDAR X2进行SLAM、自主导航方案选择背景一、方案总览&#xff08;两种主流实现&#xff09;方案A&#xff1a;纯透传&#xff08;最简&#xff0c;推荐入门&#xff09;方案B&#xff1a;Micro-ROS&#xff08;标准ROS 2架构&#xff0c;适合完整导航&#xff0…...

新手入门指南:基于快马平台构建vmware17交互式安装教学应用

新手入门指南&#xff1a;基于快马平台构建VMware17交互式安装教学应用 作为一个刚接触虚拟化技术的新手&#xff0c;第一次安装VMware Workstation 17时可能会遇到不少困惑。从下载安装包到最终配置完成&#xff0c;整个过程涉及多个步骤&#xff0c;每个环节都可能出现各种问…...

实战指南:基于快马平台生成git自动化部署脚本,实现ci/cd流水线

今天想和大家分享一个实战中特别实用的技巧&#xff1a;如何用git结合自动化脚本来简化版本发布和部署流程。这个方案在我们团队的实际项目中已经稳定运行了大半年&#xff0c;效果非常不错。 版本号自动打tag功能 这个脚本的核心功能之一就是自动读取项目中的版本号文件&…...

Windows ISO制作与补丁集成自动化工具实战指南:从手动操作到批量部署的效率革命

Windows ISO制作与补丁集成自动化工具实战指南&#xff1a;从手动操作到批量部署的效率革命 【免费下载链接】Win_ISO_Patching_Scripts Win_ISO_Patching_Scripts 项目地址: https://gitcode.com/gh_mirrors/wi/Win_ISO_Patching_Scripts 在数字化时代&#xff0c;系统…...

掌握PingFangSC字体配置优化:面向全平台开发者的专业指南

掌握PingFangSC字体配置优化&#xff1a;面向全平台开发者的专业指南 【免费下载链接】PingFangSC PingFangSC字体包文件、苹果平方字体文件&#xff0c;包含ttf和woff2格式 项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSC 比传统方案提升30%效率的跨平台适配…...

成为技术专家的捷径?不,只有长期主义的坚持

在软件测试领域&#xff0c;我们常常被一种“速成”的幻象所包围。铺天盖地的培训广告承诺“三个月精通自动化测试”、“六周成为性能测试专家”&#xff0c;各种“一招鲜”的测试工具和“万能”的测试框架被包装成通往成功的捷径。对于身处其中、渴望突破职业瓶颈的测试工程师…...

【米家IoT开发】巧用Charles抓包,高效定位与调试网络接口

1. 为什么Charles是米家IoT开发的调试神器 当你开发米家扩展程序时&#xff0c;最头疼的莫过于接口返回异常数据&#xff0c;或者请求莫名其妙失败。这时候如果只能靠猜问题出在哪里&#xff0c;那简直就是在黑暗中摸索。我刚开始做米家IoT开发时&#xff0c;就经常被这种问题困…...

从YOLOv8到RTDETR:如何将训练后的YOLO指标无缝转换为COCO格式

1. 为什么需要YOLO到COCO格式转换 当你用YOLOv8官方代码训练RTDETR模型时&#xff0c;会发现评估结果默认输出的是YOLO格式指标。但学术界和工业界普遍采用COCO评估标准&#xff0c;这就好比在中国用人民币交易&#xff0c;到了欧洲就得换成欧元。我在去年帮某无人机公司做目标…...