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

亚马逊Buy for Me代购服务全流程实测:从下单到收货的完整避坑手册

亚马逊Buy for Me代购服务实战解析&#xff1a;从入门到精通的完整指南 跨境购物早已不是新鲜事&#xff0c;但每次看到海外电商平台上那些国内买不到的好物&#xff0c;心里总免不了痒痒的。亚马逊最新推出的Buy for Me服务&#xff0c;或许正是解决这一痛点的钥匙。作为一名长…...

Graphormer一键部署与运维监控实战

Graphormer一键部署与运维监控实战 1. 企业级AI模型运维挑战 在AI技术快速落地的今天&#xff0c;Graphormer作为图神经网络领域的先进模型&#xff0c;已经在推荐系统、分子属性预测等场景展现出强大能力。但很多企业在实际部署后常常面临运维难题&#xff1a;服务突然崩溃找…...

文脉定序入门指南:文脉定序镜像更新策略与版本兼容性管理规范

文脉定序入门指南&#xff1a;文脉定序镜像更新策略与版本兼容性管理规范 1. 认识文脉定序系统 文脉定序是一款专门用于提升信息检索精度的智能语义重排序平台。在传统搜索系统中&#xff0c;经常会出现"搜得到但排不准"的问题——系统能找到相关文档&#xff0c;但…...

【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…...

Beyond ChatGPT: Building Physical World AI with PaLM-E and VoxPoser (Hands-on Guide)

从语言模型到物理世界操作&#xff1a;PaLM-E与VoxPoser实战指南 当ChatGPT在对话中展现出惊人的语言理解能力时&#xff0c;一个更激动人心的问题浮现&#xff1a;如何让AI系统突破虚拟界限&#xff0c;在物理世界中执行复杂任务&#xff1f;这正是PaLM-E与VoxPoser这类多模态…...

OpenClaw性能对比测试:Qwen3-4B与Qwen3-32B模型任务执行效率

OpenClaw性能对比测试&#xff1a;Qwen3-4B与Qwen3-32B模型任务执行效率 1. 测试背景与目标 最近在本地部署OpenClaw时遇到了一个实际选择难题&#xff1a;作为个人开发者&#xff0c;到底该选择Qwen3-4B这样的轻量模型&#xff0c;还是直接上Qwen3-32B这样的"大家伙&qu…...

数字IC时序约束实战:深入解析clock_uncertainty的设置策略与后端影响

1. 时钟不确定度的本质与组成 刚入行数字IC设计时&#xff0c;我最头疼的就是时序约束里那些看似相似却又微妙差别的概念。记得第一次看到clock_uncertainty这个参数&#xff0c;我盯着综合报告里的红色违例发了半小时呆。后来才明白&#xff0c;这个参数就像给时钟信号加了&qu…...

GTE-Base-ZH一键部署教程:3步在Ubuntu上搭建语义检索服务

GTE-Base-ZH一键部署教程&#xff1a;3步在Ubuntu上搭建语义检索服务 想给自己的应用加个智能搜索功能&#xff0c;但一看到复杂的模型部署就头疼&#xff1f;别担心&#xff0c;今天咱们就来聊聊怎么用最简单的方法&#xff0c;在Ubuntu系统上把GTE-Base-ZH这个强大的中文语义…...

Electron 14+ 开发必看:WebContentsView 实战指南(含与 BrowserView 对比)

Electron 14 开发实战&#xff1a;WebContentsView 深度解析与性能优化 如果你正在使用 Electron 14 开发跨平台桌面应用&#xff0c;那么 WebContentsView 绝对是你需要重点掌握的核心组件。作为 Electron 团队在 14 版本引入的全新视图系统&#xff0c;WebContentsView 不仅解…...

1220亿美元!OpenAI创下史上最大融资纪录;DeepSeek连续三天发生服务异常;Claude Code 51万行源码泄露 | 极客头条

「极客头条」—— 技术人员的新闻圈&#xff01;CSDN 的读者朋友们好&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。&#xff08;投稿或寻求报道&#xff1a;zhanghycsdn.net&#xff09;整理 | 苏宓出品 | CSDN&#xff08;ID&…...