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

vue3学习总结1

一.vue3与vue2相比带来哪些变化?

a.性能的提升(包括打包大小减少,初次渲染的速度加快,更新渲染速度加快,内存减少)

b.源码的升级(响应式的原理发生了变化,由原来的defineProperty变成了Proxy;重写虚拟DOM的实现和Tree-Shaking )

拓展:Tree-Shaking:用于描述移除js上下文中未引用的代码行为的术语。webpack支持Tree-Shaking。

c.拥抱TypeScript(vue3可以更好的支持TypeScript)

d.新特性:

  • Composltion API(组合API)

  1. setup配置

  1. ref与reactive

  1. watch与watchEffect

  1. provide与inject

  • 新的内置组件

  1. Fragment

  1. Teleport

  1. Suspense

  • 其他改变

  1. 新的生命周期钩子

  1. data选项应始终被声明为一个函数

  1. 移除keyCode支持作为v-on的修饰符

二.vue3中的setup

首先:setup是vue3的一个新的配置项,值为一个函数。它的作用相当于是代替了vue2中的data,computed,method等等。其次它的返回值有两种除了返回一个对象外还可以返回一个渲染函数。

不过需要注意的一点是:setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。

三.setup中的两个注意点:

  • setup的执行时机

  • 在beforeCreate之前执行一次,this是undefined

  • setup的参数

  • props:值为对象,包含:组件外部传递过来,且组件内部声明接受了属性。

  • context:上下文对象

  • attrs:值为对象,包含:组件外部传递过来但没有在props配置中声明的属性,相当于this.$attrs

  • slots:收到的插槽内容,相当于this.$slots

  • emit:触发自定义事件函数,相当于this.$emit

例子如下:

子组件Demo.vue:

<template><div style="text-center: left"><h1>个人信息</h1><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><h2>传递信息:{{ msg }}</h2><button @click='test'>测试触发一下Demo组件的hello事件</button></div>
</template>
<script>
import { reactive } from "vue";
export default {name: "Demo",props:['msg','school'],emits:['hello'],// beforeCreate() {//   console.log("--------beforeCreate--------");// },setup( props,context) {console.log("-------setup--------");//setup早于beforeCreate执行console.log('-------setup------',props);console.log('-------setup------',context);console.log('-------setup------',context.attrs);//相当于vue2中的$attrsconsole.log('-------setup------',context.emit);//触发自定义事件console.log('-------setup------',context.slots);//插槽let person = reactive({name: "张三",age: 18,});//方法function test() {context.emit('hello',666)}//返回一个对象return {person,test};},
};
</script>

父组件App.vue

<template><Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷"><template v-slot:qwe><span>操作与系统</span></template><template v-slot:asd><span>马原</span></template></Demo>
</template>
<script>
import Demo from "./components/Demo.vue";
export default {name: "App",components: {Demo,},setup() {function showHelloMsg(value) {alert(`你好啊,你触发了hello事件,我收到的参数时${value}!`);}return{showHelloMsg}},
};
</script>

相关文章:

vue3学习总结1

一.vue3与vue2相比带来哪些变化&#xff1f;a.性能的提升&#xff08;包括打包大小减少&#xff0c;初次渲染的速度加快&#xff0c;更新渲染速度加快&#xff0c;内存减少&#xff09;b.源码的升级&#xff08;响应式的原理发生了变化&#xff0c;由原来的defineProperty变成了…...

SpringBoot统一功能处理

一、统一用户登录权限验证 1.1Spring拦截器 实现拦截器需要以下两步&#xff1a; 1.创建自定义拦截器&#xff0c;实现 HandlerInterceptor 接⼝的 preHandle&#xff08;执行具体方法之前的预处理&#xff09;方法。 2.将⾃定义拦截器加⼊ WebMvcConfigurer 的 addIntercept…...

2022年3月电子学会Python等级考试试卷(五级)答案解析

目录 一、单选题(共25题,共50分) 二、判断题(共10题,共20分) 三、编程题(共3题,共30分) 青少年软件编程(Python)等级考试试卷(五级&#...

【C++】智能指针

目录 一、先来看一下什么是智能指针 二、 auto_ptr 1、C98版本 2、C11的auto_ptr 三、boost 库中的智能指针 1. scoped_ptr 2、shared_ptr&#xff08;最好的智能指针&#xff09; 四、C11中新提供的智能指针 unique_ptr shared_ptr std::shared_ptr的循环引用问题…...

Seata架构篇 - AT模式

AT 模式 概述 Seata AT 模式是一种非侵入式的分布式事务解决方案&#xff0c;Seata 在内部做了对数据库操作的代理层&#xff0c;我们使用 Seata AT 模式时&#xff0c;实际上用的是 Seata 自带的数据源代理 DataSourceProxy&#xff0c;Seata 在这层代理中加入了很多逻辑&am…...

加油站会员管理小程序实战开发教程12

我们上一篇介绍了会员数据源的开发,本节我们介绍一下会员注册功能。 首先呢梳理一下会员注册的业务逻辑,如果用户是首次登录,那他肯定还没有给我们的小程序提交任何的信息。那么我们就在我的页面给他显示一个注册的按钮,如果他已经注册过了,那么就正常显示会员的信息,他…...

用腾讯云同步Obsidian笔记

介绍 之前用gitee同步OB笔记&#xff0c;同时做图床。但由于git系产品设置起来相对复杂&#xff0c;且后续可能有外链过审等问题。周五被同事小姐姐安利了用腾讯云COS&#xff0c;试了一下&#xff0c;果然不错。其主要优点如下&#xff1a; 设置简单&#xff0c;学习成本低&…...

浅析C++指针与引用,栈传递的关系

目录 前言 C 堆指针 栈指针 常量指针 指针常量 引用 常量引用 总结 前言 目前做了很多项目&#xff0c;接触到各种语言&#xff0c;基本上用什么学什么&#xff0c;语言的边际就会很模糊&#xff0c;实际上语言的设计大同小异&#xff0c;只是语言具备各自的特性区别。…...

图解LeetCode——剑指 Offer 10- II. 青蛙跳台阶问题

一、题目 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级台阶。求该青蛙跳上一个 n 级的台阶总共有多少种跳法。 答案需要取模 1e97&#xff08;1000000007&#xff09;&#xff0c;如计算初始结果为&#xff1a;1000000008&#xff0c;请返回 1。 二、示例 2.1>…...

【Linux】用户分类+权限管理+umask+粘滞位说明

目录 1.用户分类 su指令 2.认识Linux权限 2.1 文件访问者的分类 2.2 文件类型和访问权限 a. 文件类型 file指令 b. 访问权限 2.3 文件权值的表示方法 a. 字母表示法 b. 八进制表示法 3.如何修改文件访问者的权限及相关指令 1. chmod指令 2. chown指令 3. chgrp指…...

【干货】如何打造HR无法拒绝的简历?测试开发大牛带手把手你写简历!

通过率90%&#xff0c;优秀的软件测试简历长什么样&#xff1f; 也许口才好的人会觉得简历不重要&#xff0c;能说就行了&#xff0c;那是因为你没有体会过石沉大海的感觉&#xff01; 很多人觉得疑惑&#xff0c;为什么我投了那么多简历&#xff0c;都没有接到面试通知&…...

nodejs学习-4:nodejs连接mongodb和相关操作

1. express生成器生成express模板 前提需要首先下载好&#xff1a;express-generator&#xff0c;命令如下(全局安装) npm install -g express-generator生成模板命令如下&#xff1a; express 项目名称 --viewejs // --view 参数表示前端界面使用的引擎&#xff0c;这里使用…...

【博客629】Linux DNS解析原理与配置

Linux DNS解析原理与配置 1、DNS缓存 作用&#xff1a; 程序客户端、下游的 DNS 服务器每次查询 DNS 成功之后&#xff0c;通常会将该 DNS 记录缓存一段时间&#xff0c;避免频繁发出查询请求的耗时。 Linux下的DNS缓存&#xff1a; Linux 系统默认不会在本地建立 DNS 缓存…...

【CSP】202212-2 训练计划

题目 问题背景 西西艾弗岛荒野求生大赛还有 天开幕&#xff01; 问题描述 为了在大赛中取得好成绩&#xff0c;顿顿准备在 天时间内完成“短跑”、“高中物理”以及“核裂变技术”等总共 项科目的加强训练。其中第 项&#xff08; &#xff09;科目编号为 &#xff0c;也可简…...

java基础学习 day42(继承中构造方法的访问特点,this、super的使用总结)

继承中&#xff0c;构造方法的访问特点 父类的构造方法不会被子类继承&#xff0c;但可以通过super()调用父类的构造方法&#xff0c;且只能在子类调用&#xff0c;在测试类中是不能手动单写构造方法的。子类中所有的构造方法默认先调用父类的无参构造&#xff0c;再执行自己构…...

生物医药多组学与生物信息方法介绍

基因组学告诉你可能发生什么&#xff0c;转录组学和蛋白组学告诉你即将发生什么&#xff0c;而代谢组学告诉你正在发生什么 1、多组学与生信方法 生物医学技术的组学包括基因组学、转录组学、蛋白质组学、代谢组学和表观基因组学等。这些组学研究领域通过大量数据的高通量技术…...

3|物联网控制|计算机控制-刘川来胡乃平版|第2章:计算机控制系统中的检测设备和执行机构-2.2过程控制中常用的执行器|课堂笔记|ppt

...

【进阶篇】线程的硬件基础

文章目录高速缓存缓存一致性协议写缓冲区和无效化队列高速缓存 简介 高速缓存是主内存与处理器之间的硬件&#xff0c;其容量小于主存&#xff0c;但存取速率远高于主存。因此处理器在执行读写操作时&#xff0c;可直接和高速缓存交互&#xff0c;提高响应速度。 我们常见的变…...

关于 ISP Tuning的学习,分享几点看法

关于学习&#xff0c;分享几点看法&#xff0c;欢迎讨论 。1、分阶段性的&#xff0c;阶梯式学习。2、带目的性的&#xff0c;任务式学习。3、有总结性的&#xff0c;输出式学习。如上3条&#xff0c;可以依次循环去执行&#xff0c;下面我以 ISP Tuning 的学习为例&#xff0c…...

RocketMQ源码阅读

没有用过rocketmq&#xff0c;但是一直对RocketMQ的实现很感兴趣&#xff0c;本次阅读源码基于5.0.0 一、 nameserver 通过源码阅读发现&#xff0c;它的作用主要是当作一个注册中心&#xff0c;注册broker、topic等信息&#xff0c;维护topic以及broker队列的路由信息&#…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...