Vue 3.0 学习笔记之基础知识
系列文章目录
提示:阅读本章之前,请先阅读目录
文章目录
- 系列文章目录
- 前言
- Vue 3.0 创建
- 与Vue2.0对比的变化
- 关闭语法检查
- setup 组合式函数compositions
- 响应式数据 ref
- reactive 函数
- Vue3.0 响应原理
- ref 和 reactive 区别
- setup 注意点
- computed 计算函数
- watch 函数
- watchEffect
- Vue 3.0 生命周期
- 自定义Hook
前言
Vue 3.0 创建


与Vue2.0对比的变化


关闭语法检查
lintOnSave: false

setup 组合式函数compositions



第二种,渲染函数


响应式数据 ref
ref = reference
impl = implement


在template模板里面,会自动读取.value
通过ref函数,就可以实现响应式数据

其实,通过ref函数,即可生成一个引用对象,底层上还是用的Object.defindProperty,用的getter和setter方法,其次,这里的value,是通过原型对象实现的,相当于,vue2.0的_data
reactive 函数


Vue3.0 响应原理




Vue3.0,真正使用的是Reflect反射,会返回一个布尔值,执行成功返回true,执行失败返回false

ref 和 reactive 区别

setup 注意点



computed 计算函数



watch 函数

setup() {let name = ref("哈哈哈")let age = ref(9999)let obj = reactive({a: "hhhh",age: 9999,job: {a: {c: "pppp"}}})// 情况1,监视基本类型watch(name, (newValue, oldValue) => {console.log(newValue, oldValue)}, {immediate: true})// 情况2,监视多个基本类型watch([name, age], (newValue, oldValue) => {console.log(newValue, oldValue)}, { deep: false }) // 这里是无法关闭深度监听的// 情况3,监视对象,输出的oldValue是和newValue一样的watch(obj, (newValue, oldValue) => {console.log(newValue, oldValue)})// 情况4,监视某个属性watch(() => obj.a, (newValue, oldValue) => {console.log(newValue, oldValue)})// 情况5,监视某些属性watch([() => obj.a, obj.age], (newValue, oldValue) => {console.log(newValue, oldValue)})// 情况6,监视对象里面的对象watch(() => obj.job.a.c, (newValue, oldValue) => {console.log(newValue, oldValue)}, { deep: true }) // 必须的开深度监听return {name,obj}}

watchEffect


Vue 3.0 生命周期


带on的优先级高于配置项
自定义Hook



相关文章:
Vue 3.0 学习笔记之基础知识
系列文章目录 提示:阅读本章之前,请先阅读目录 文章目录系列文章目录前言Vue 3.0 创建与Vue2.0对比的变化关闭语法检查setup 组合式函数compositions响应式数据 refreactive 函数Vue3.0 响应原理ref 和 reactive 区别setup 注意点computed 计算函数watch…...
WebGIS行政区炫酷特效——流光特效教程
先来看下效果: 图片截图: 流光特效的思路是从行政区的边界中随着时间不断的取若干段线条换成另一种高亮颜色。 流光的第一步首先是发光,发光的教程在这里: GIS矢量图形多边形地块行政区发光,阴影发光特效实现_疯狂的GISer的博客-CSDN博客 学会发光以后,接下来需要做的…...
2023-3-3 刷题情况
保证文件名唯一 题目描述 给你一个长度为 n 的字符串数组 names 。你将会在文件系统中创建 n 个文件夹:在第 i 分钟,新建名为 names[i] 的文件夹。 由于两个文件 不能 共享相同的文件名,因此如果新建文件夹使用的文件名已经被占用…...
《青浦区加快发展跨境电子商务实施细则(审议稿)》
为进一步贯彻落实《中华人民共和国电子商务法》,上海市《关于促进本市跨境电子商务发展的若干意见》,切实做好青浦区跨境电子商务试点工作,探索和规范跨境电子商务管理,促进跨境电子商务健康快速发展,青浦商务委根据多…...
【React全家桶】React生命周期
React生命周期 1、初始化阶段 componentDidMount:render之前最后一次修改状态的机会 render:只能访问this.props和this.state,不允许修改状态和DOM输出 componentDidMount:成功render并渲染完成真实DOM之后触发 2、旧生命周期 👉👉👉加…...
B. Count the Number of Pairs
原题链接 纯纯水一下; 昨天晚上的比赛,由于半夜打的,精神状态不好,wa了俩发直接睡觉去了,现在白天写写发现,不难,水中水 模拟题吧,题目怎么说就这么作 Kristina has a string ss…...
离线数据仓库项目--技术选择
文章目录(一)技术选型1)数据采集工具2)数据存储3)数据计算4)数据可视化(二)整体架构设计(三)服务器资源规划(一)技术选型 1ÿ…...
GC Garbage Collectors
本质一、算法1、哪些是垃圾?引用计数法:reference countPython中使用了。个对象如果没有任何与之关联的引用,即他们的引用计数都不为 0,则说明对象不太可能再被用到,那么这个对象就是可回收对象。漏洞:循环…...
【网络】-- 网络基础
(本文是网络的宏观的概念铺垫) 目录 计算机网络背景 网络发展 认识 "协议" 网络协议初识 协议分层 OSI七层模型 TCP/IP 五层(或四层)模型 报头 以太网 碰撞 路由器 IP地址和MAC地址 IP地址与MAC地址总结 IP地址 MAC地址 计算机…...
二、Redis安装配置(云服务器、vmware本地虚拟机)
一、自己购买服务器 自己购买阿里云、青牛云、腾讯云或华为云服务器, 自带CentoOS或者Ubuntu环境,直接开干 二、Vmware本地虚拟机安装 1、VMWare虚拟机的安装,不讲解,默认懂 2、如何查看自己的linux是32位还是64位 getconf L…...
【学习Docker(七)】详细讲解Jenkins部署SpringCloud微服务项目,Docker-compose启动
Jenkins部署SpringCloud微服务项目,Docker-compose启动 座右铭:《坚持有效输出,创造价值无限》 本文介绍使用Jenkins部署SpringCloud微服务项目,Docker-compose启动。 之前写过安装Jenkins的过程,这里就不写安装细节了…...
时机将至,名创优品或将再掀起一波消费热浪
北京时间2月28日,名创优品发布2023财年中报,财报显示,2023财年第二季度营收规模有所收窄,但净利润、毛利率、门店数量均实现了不错的增长,总体表现可圈可点。 (资料来源:富途牛牛) …...
深圳大学计软《面向对象的程序设计》实验8 静态与友元
A. 旅馆旅客管理(静态成员) 题目描述 编写程序,实现某旅馆的客人住宿记录功能。 定义一个Customer类,要求输入客人的姓名,创建一个Customer对象。类声明如下: 调用类的Display函数输出客人IDÿ…...
【基础算法】单链表的OJ练习(2) # 链表的中间结点 # 链表中倒数第k个结点 #
文章目录前言链表的中间结点链表中倒数第k个结点写在最后前言 对于单链表的OJ练习,需要深刻理解做题的思路,这样我们才能够在任何场景都能够熟练的解答有关链表的问题。 关于OJ练习(1):-> 传送门 <-,…...
vue路由文件拆分管理
随着项目的原来越大,路由越来越多,我们的路由也会越来越多,如果都集中在一个文件中,会很冗杂文件很长。这时候我们可以将路由文件拆分,可读、方便管理。多人合作添加路由也能更多的避免代码冲突 代码拆分目录如图&…...
实例解析Java反射
反射是大多数语言里都必不不可少的组成部分,对象可以通过反射获取他的类,类可以通过反射拿到所有方法(包括私有),拿到的方法可以调用,总之通过“反射”,我们可以将Java这种静态语言附加上动态特…...
Android 9适配经验总结
目录四大组件适配Activity启动方式适配Service启动方式适配前台服务需要添加权限限制静态广播的接收限制ContentResolver数据更新操作权限与安全相关主要适配点运行时动态权限申请默认不支持 http 请求SharedPreferences 适配四大组件适配 Android 应用的开发离不开 Android 四…...
定时任务调度方案——Xxl-Job
定时任务调度方案 随着系统规模的发展,项目的组织结构以及架构越来越复杂,业务覆盖的范围越来越广,定时任务数量日益增多,任务也变得越来越复杂,尤其是为了满足在用户体量日历增大时,系统能够稳定运行&…...
操作系统引导
操作系统是一种程序,程序以数据的形式存放在硬盘中,而硬盘通常分为多个区,一个计算机中又有多个或多种外部设备。 操作系统引导指的是计算机利用CPU运行特定程序,通过程序识别硬盘,识别硬盘分区,识别硬盘分…...
[C#] 多线程单例子,分为阻塞型和分阻塞型, 在unity里的应用
在单例中使用多线程时,需要注意以下几点: 线程安全:在多线程环境下,单例对象可能被多个线程同时访问,因此需要确保单例的线程安全,避免出现数据竞争等问题。 对象创建:如果在单例对象的构造函数…...
5分钟解决经典游戏兼容性问题:DDrawCompat完整使用指南
5分钟解决经典游戏兼容性问题:DDrawCompat完整使用指南 【免费下载链接】DDrawCompat DirectDraw and Direct3D 1-7 compatibility, performance and visual enhancements for Windows Vista, 7, 8, 10 and 11 项目地址: https://gitcode.com/gh_mirrors/dd/DDraw…...
Grep vs RAG vs ACE:AI编程助手如何选择?实测对比三大代码检索技术
Grep vs RAG vs ACE:AI编程助手技术选型实战指南 当团队需要引入AI编程助手时,技术负责人常陷入工具选择的困境。市面上主流的代码检索技术可分为三大流派:基于传统文本匹配的Grep路线、依赖向量数据库的RAG方案,以及新兴的混合检…...
TrafficMonitor插件系统终极指南:3步打造个性化系统监控中心
TrafficMonitor插件系统终极指南:3步打造个性化系统监控中心 【免费下载链接】TrafficMonitorPlugins 用于TrafficMonitor的插件 项目地址: https://gitcode.com/gh_mirrors/tr/TrafficMonitorPlugins TrafficMonitor插件系统是一款强大的扩展框架࿰…...
Qt新手必看:MinGW和MSVC构建套件到底怎么选?保姆级对比指南
Qt构建套件选择指南:MinGW与MSVC深度对比与实战决策 刚接触Qt开发的初学者,往往在配置开发环境的第一步就陷入选择困难——面对MinGW和MSVC这两个构建套件选项,究竟该如何抉择?这个看似简单的选择背后,实则关系到后续开…...
PyTorch 3.0静态图分布式训练源码分析窗口即将关闭:官方已标记torch.distributed._spmd模块为“实验性冻结”,2024 Q3后将移除调试钩子入口
第一章:PyTorch 3.0静态图分布式训练的演进背景与冻结决策动因PyTorch 3.0正式宣布冻结静态图(TorchScript)在分布式训练路径中的演进支持,这一决策并非技术倒退,而是基于多年大规模生产实践与生态协同的理性收敛。随着…...
告别CANFD高速丢帧!手把手教你配置STM32 FDCAN的收发器延时补偿(TDC)
攻克CANFD高速通信难题:STM32 FDCAN延时补偿实战指南 当CANFD的波特率飙升至10Mb/s时,许多工程师突然发现原本稳定的通信开始频繁丢帧——这往往不是代码逻辑问题,而是物理层信号延时在作祟。本文将带您深入STM32 FDCAN的Transceiver Delay C…...
3步搞定Windows 11优化:用Win11Debloat让你的电脑更快更干净
3步搞定Windows 11优化:用Win11Debloat让你的电脑更快更干净 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本,用于从Windows中移除预装的无用软件,禁用遥测,从Windows搜索中移除Bing,以及执行各种其他更改以简…...
RabbitMQ 3.13.2安装踩坑实录:如何绕过rabbitmq-service.bat install code 1错误
RabbitMQ 3.13.2安装实战:深度解析服务注册失败与系统级解决方案 当你在Windows系统上部署RabbitMQ 3.13.2时,那个刺眼的rabbitmq-service.bat install exited with code 1错误就像一堵突然出现的墙。这不仅仅是简单的安装失败,而是系统权限、…...
别再为付费教程头疼了!手把手教你用两块ESP32实现经典蓝牙通信(附完整代码)
零成本玩转ESP32蓝牙通信:从踩坑到实战的完整指南 在创客圈里流传着一句话:"每个物联网项目都是从点亮第一颗LED开始的。"而当我们想用两块ESP32开发板通过蓝牙控制这颗LED时,却常常陷入付费教程、失效代码和模糊文档的泥潭。本文将…...
Twisted Protocols终极指南:快速构建高性能网络协议的简单方法
Twisted Protocols终极指南:快速构建高性能网络协议的简单方法 【免费下载链接】twisted Event-driven networking engine written in Python. 项目地址: https://gitcode.com/gh_mirrors/tw/twisted Twisted是一个用Python编写的事件驱动网络引擎࿰…...
