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里的应用
在单例中使用多线程时,需要注意以下几点: 线程安全:在多线程环境下,单例对象可能被多个线程同时访问,因此需要确保单例的线程安全,避免出现数据竞争等问题。 对象创建:如果在单例对象的构造函数…...
社交媒体机器人检测的终极对决:TwiBot-22基准测试深度解析
社交媒体机器人检测的终极对决:TwiBot-22基准测试深度解析 【免费下载链接】TwiBot-22 项目地址: https://gitcode.com/gh_mirrors/tw/TwiBot-22 在数字时代,社交媒体上的机器人账号已成为信息传播的重要参与者。它们既能推动正面信息传播&#…...
AI赋能安装流程:快马智能诊断工具,自动解决软件安装兼容性问题
在开发软件的过程中,安装环节往往是第一个拦路虎。特别是当遇到系统环境复杂、依赖库版本冲突、权限配置等问题时,传统的安装方式常常让人头疼不已。最近我在尝试开发一个智能安装问题诊断工具时,发现InsCode(快马)平台的AI辅助功能特别实用&…...
神经高利贷:预支未来技能导致认知崩溃
在软件测试领域,从业者常面临一个隐形威胁:过度追求新技能而忽视认知极限,最终引发崩溃。这种现象被称为“神经高利贷”,即通过预支未来学习能力来应对当前挑战,结果导致认知资源枯竭、错误率飙升,甚至职业…...
League Toolkit:重新定义英雄联盟游戏体验的智能辅助工具
League Toolkit:重新定义英雄联盟游戏体验的智能辅助工具 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 价值定位&am…...
从VCHA移除到成功升级:VMware VCSA6.5到6.7的完整实战记录
从VCHA移除到成功升级:VMware VCSA6.5到6.7的完整实战记录 在虚拟化运维领域,VMware vCenter Server Appliance(VCSA)的升级一直是技术团队面临的常规挑战。当环境配置了vCenter High Availability(VCHA)时…...
避坑指南:在RV1103B上为SC132GS摄像头添加设备树节点的正确姿势
RV1103B平台SC132GS摄像头设备树配置实战指南 1. 瑞芯微RV1103B平台摄像头开发概述 在嵌入式视觉系统开发中,瑞芯微RV1103B凭借其出色的图像处理能力和低功耗特性,成为工业视觉、智能门铃等场景的热门选择。SC132GS作为一款高性价比的1/3英寸CMOS传感器&…...
逆流而上,逐光而行:光伏微逆的技术探索之路
交错反激光伏并网微逆:软件源程序硬件资料详细设计说明文档 产品介绍: 本项目用于单相光伏并网微型逆变器。 前级采用交错反激拓扑生成馒头波,后级采用SCR拓扑反向得到正弦波,带有:MPPT、锁相环、孤岛检测。 本项目支持…...
蛋白质设计实战:基于RFdiffusion的Motif Scaffolding功能位点定制化设计
1. 认识RFdiffusion与Motif Scaffolding 第一次接触蛋白质设计时,我被这个领域的复杂性震撼到了。20种氨基酸就像乐高积木,但它们的组合方式比宇宙中的星辰还要多。而RFdiffusion就像是一把神奇的钥匙,帮我打开了蛋白质设计的大门。 RFdiffus…...
英集芯-IP5316、IP5219有什么区别?详细总结一下
简介 IP5219和IP5316都是英集芯的充电管理IC,两款移动电源SOC芯片输出/输入参数基本一致,但是使用起来却有一些差异,下面就对两款IC使用中遇到的一些问题做一些总结。 IP5219:2.1A 充电 2.4A 放电集成 TYPE_C 协议移动电源 SOC; IP5316:集成 TYPE_C 协议的 2.4A 充电/2.4…...
哔哩哔哩第三方开放平台软件bilipai7.0.2
bilipai是一款面向B站内容爱好者的第三方安卓客户端,它有着清新灵动的界面风格和流畅自然的操作体验,能完整同步B站的各类视频资源,包括番剧、动画、知识科普、生活分享等内容类别,用户登录账号后,还可以实时同步自己的…...
