Vue3开始

1. Vue3简介

  • 2020年9月18日,Vue.js发布版3.0版本,代号:One Piece(海贼王)

  • 经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者

  • 官方发版地址:Release v3.0.0 One Piece · vuejs/core

  • 截止2023年10月,最新的公开版本为:3.3.4

    在这里插入图片描述

1.1. 【性能的提升】

  • 打包大小减少41%

  • 初次渲染快55%, 更新渲染快133%

  • 内存减少54%

1.2.【 源码的升级】

  • 使用Proxy代替defineProperty实现响应式。

  • 重写虚拟DOM的实现和Tree-Shaking

1.3. 【拥抱TypeScript】

  • Vue3可以更好的支持TypeScript

1.4. 【新的特性】

  1. Composition API(组合API):

    • setup

    • refreactive

    • computedwatch

  2. 新的内置组件:

    • Fragment

    • Teleport

    • Suspense

  3. 其他改变:

    • 新的生命周期钩子

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

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

2. 创建Vue3工程

2.1. 【基于 vue-cli 创建】

点击查看官方文档

备注:目前vue-cli已处于维护模式,官方推荐基于 Vite 创建项目。

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli 
npm install -g @vue/cli## 执行创建命令
vue create vue_test##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x## 启动
cd vue_test
npm run serve

2.2. 【基于 vite 创建】(推荐)

vite 是新一代前端构建工具,官网地址:https://vitejs.cn,vite的优势如下:

  • 轻量快速的热重载(HMR),能实现极速的服务启动。
  • TypeScriptJSXCSS 等支持开箱即用。
  • 真正的按需编译,不再等待整个应用编译完成。
  • webpack构建 与 vite构建对比图如下:
    在这里插入图片描述
    在这里插入图片描述
  • 具体操作如下(点击查看官方文档)
## 1.创建命令
npm create vue@latest## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

自己动手编写一个App组件

<template><div class="app"><h1>你好啊!</h1></div>
</template><script lang="ts">export default {name:'App' //组件名}
</script>

安装官方推荐的vscode插件:

在这里插入图片描述

在这里插入图片描述

总结:

  • Vite 项目中,index.html 是项目的入口文件,在项目最外层。
  • 加载index.html后,Vite 解析 <script type="module" src="xxx"> 指向的JavaScript
  • Vue3**中是通过 **createApp 函数创建一个应用实例。

2.3. 【一个简单的效果】

Vue3向下兼容Vue2语法,且Vue3中的模板中可以没有根标签

<template><div class="person"><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template><script lang="ts">export default {name:'App',data() {return {name:'张三',age:18,tel:'13888888888'}},methods:{changeName(){this.name = 'zhang-san'},changeAge(){this.age += 1},showTel(){alert(this.tel)}},}
</script>

3. Vue3核心语法

3.1. 【OptionsAPI 与 CompositionAPI】

  • Vue2API设计是Options(配置)风格的。
  • Vue3API设计是Composition(组合)风格的。

Options API 的弊端

Options类型的 API,数据、方法、计算属性等,是分散在:datamethodscomputed中的,若想新增或者修改一个需求,就需要分别修改:datamethodscomputed,不便于维护和复用。

在这里插入图片描述
在这里插入图片描述

Composition API 的优势

可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起。

在这里插入图片描述
在这里插入图片描述

说明:以上四张动图原创作者:大帅老猿

3.2. 【拉开序幕的 setup】

setup概述

setupVue3中一个新的配置项,值是一个函数,它是 Composition API “表演的舞台,组件中所用到的:数据、方法、计算属性、监视…等等,均配置在setup中。

特点如下:

  • setup函数返回的对象中的内容,可直接在模板中使用。
  • setup中访问thisundefined
  • setup函数会在beforeCreate之前调用,它是“领先”所有钩子执行的。
<template><div class="person"><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template><script lang="ts">export default {name:'Person',setup(){// 数据,原来写在data中(注意:此时的name、age、tel数据都不是响应式数据)let name = '张三'let age = 18let tel = '13888888888'// 方法,原来写在methods中function changeName(){name = 'zhang-san' //注意:此时这么修改name页面是不变化的console.log(name)}function changeAge(){age += 1 //注意:此时这么修改age页面是不变化的console.log(age)}function showTel(){alert(tel)}// 返回一个对象,对象中的内容,模板中可以直接使用return {name,age,tel,changeName,changeAge,showTel}}}
</script>

setup的返回值

  • 若返回一个对象:则对象中的:属性、方法等,在模板中均可以直接使用**(重点关注)。**
  • 若返回一个函数:则可以自定义渲染内容,代码如下:
setup(){return ()=> '你好啊!'
}

setup与OptionsAPI的关系

  • Vue2 的配置(datamethos…)中可以访问到 setup中的属性、方法。
  • 但在setup不能访问到Vue2的配置(datamethos…)。
  • 如果与Vue2冲突,则setup优先。

setup语法糖

setup函数有一个语法糖,这个语法糖,可以让我们把setup独立出去,代码如下:

<template><div class="person"><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><button @click="changName">修改名字</button><button @click="changAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template><script lang="ts">export default {name:'Person',}
</script><!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">console.log(this) //undefined// 数据(注意:此时的name、age、tel都不是响应式数据)let name = '张三'let age = 18let tel = '13888888888'// 方法function changName(){name = 'zhang-san'//注意:此时这么修改name页面是不变化的}function changAge(){console.log(age)age += 1 //注意:此时这么修改age页面是不变化的}function showTel(){alert(tel)}
</script>

扩展:上述代码,还需要编写一个不写setupscript标签,去指定组件名字,比较麻烦,我们可以借助vite中的插件简化

  1. 第一步:npm i vite-plugin-vue-setup-extend -D
  2. 第二步:vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'export default defineConfig({plugins: [ VueSetupExtend() ]
})
  1. 第三步:<script setup lang="ts" name="Person">

3.3. 【ref 创建:基本类型的响应式数据】

  • **作用:**定义响应式变量。
  • 语法:let xxx = ref(初始值)
  • **返回值:**一个RefImpl的实例对象,简称ref对象refref对象的value属性是响应式的
  • 注意点:
    • JS中操作数据需要:xxx.value,但模板中不需要.value,直接使用即可。
    • 对于let name = ref('张三')来说,name不是响应式的,name.value是响应式的。
<template><div class="person"><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><h2>地址:{{address}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template><script setup lang="ts" name="Person">import {ref} from 'vue'// name和age是一个RefImpl的实例对象,简称ref对象,它们的value属性是响应式的。let name = ref('张三')let age = ref(18)// tel、address就是一个普通的字符串,不是响应式的let tel = '13888888888'let address = '北京昌平区宏福苑·宏福科技园'function changeName(){// JS中操作ref对象时候需要.valuename.value = '李四'console.log(name.value)}function changeAge(){// JS中操作ref对象时候需要.valueage.value += 1 console.log(age.value)}function showTel(){alert(tel)}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/114180.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++23中的新功能之十七显示this的应用

一、显示this 在前面的文章中分析了显示this(Deducing This),具体的内容请移步《c23新功能之二语法中的Deducing This》&#xff0c;本篇对显示this对实际应用中的一些完善和更新形式进行分析说明&#xff0c;抛砖引玉。 二、CRTP的应用 在前面的学习中&#xff0c;学过CRTP…

ARM映像文件组成

引言 ARM编译器将各种源文件&#xff08;汇编文件、C语言程序文件、C语言程序文件&#xff09;编译生成ELF格式的目标文件&#xff08;后缀为.o文件&#xff0c;以下将目标文件简称为.o文件&#xff09;&#xff0c;.o文件经过连接器&#xff0c;和C/C运行时库一起编译生成ELF格…

如何解决香港服务器使用的常见问题

​  站长们在选择香港服务器租用时会考虑到它的各种性能以及稳定性&#xff0c;这是必须的。但是使用过程中还有些问题也不容忽视&#xff0c;比如&#xff1a;带宽资源是否短缺&#xff0c;是否存在安全漏洞&#xff0c;连接是否正常等这些问题也要考虑到。 香港服务器使用中…

php判断是否是email格式

要判断一个字符串是否是有效的电子邮件地址&#xff0c;你可以使用正则表达式和PHP内置函数来完成。以下是一个示例代码&#xff1a; $email "exampleexample.com"; // 你要检查的电子邮件地址// 使用正则表达式检查电子邮件格式 if (filter_var($email, FILTER_VA…

数据库备份与恢复(实战mysqldump+bin-log)

一、为什么要进行数据库备份&#xff1f; 常见数据库备份的应用场景如下&#xff1a; 数据丢失应用场景&#xff1a; 人为操作失误造成某些数据被误操作 软件 BUG 造成部分数据或全部数据丢失 硬件故障造成数据库部分数据或全部数据丢失 安全漏洞被入侵数据恶意破坏 非数据丢…

UV统计 - HyperLogLog

UV统计 - HyperLogLog 首先我们搞懂两个概念&#xff1a; UV&#xff1a;全称Unique Visitor&#xff0c;也叫独立访客量&#xff0c;是指通过互联网访问、浏览这个网页的自然人。1天内同一个用户多次访问该网站&#xff0c;只记录1次。PV&#xff1a;全称Page View&#xff…

Leetcode—2331.计算布尔二叉树的值【简单】

2023每日刷题&#xff08;六&#xff09; Leetcode—2331.计算布尔二叉树的值 递归实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ bool evaluateTree(struct TreeNod…

【算法与数据结构】--算法应用--算法在实际问题中的应用

一、算法在搜索引擎中的应用 搜索引擎是计算机科学中算法应用的典型领域之一。搜索引擎的主要任务是帮助用户在海量数据中快速找到相关信息。以下是算法在搜索引擎中的主要应用&#xff1a; 爬虫算法&#xff1a;爬虫是搜索引擎的基础&#xff0c;用于自动抓取互联网上的网页…

2.1.C++项目:网络版五子棋对战之前置知识

文章目录 一、Websocketpp&#xff08;一&#xff09;Websocket介绍&#xff08;二&#xff09;报文格式&#xff08;三&#xff09;Websocketpp介绍&#xff08;四&#xff09;Websocketpp使用1.websocketpp常用接口介绍2. http/websocket服务器 &#xff08;五&#xff09;Js…

SLAM ORB-SLAM2(5)例程了解

SLAM ORB-SLAM2(5)例程了解 1. TUM 数据集1.1. 三种相机1.2. 目录结构2. 单目demo2.1. 参数校验2.2. 配置数据集图像路径2.3. 创建单目SLAM2.3. 处理图像数据2.4. 结束3. RGB-D demo3.1. 参数校验3.2. 配置数据集图像路径3.3. 创建 RGB-D SLAM3.3. 处理图像数据3.4. 结束4. 总…

动画制作软件 Animate 2024 mac中文版介绍说明(an2024) v24.0

Animate 2024 mac是一款动画制作软件&#xff0c;它能帮助用户轻松制作出各种精美的动画作品。 Animate 2024拥有强大而直观的设计工作流程&#xff0c;能够让用户自由地构建动画场景、绘制精美的图形&#xff0c;并轻松添加动态效果。无论是传统手绘风格还是骨骼动画&#xff…

rust的排序

Vec 中的 Methods from Deref<Target [T]> 示例 fn main() {let mut strings vec!["banana", "", "ban", "", "apple", "alpha", "cherry", "date"];strings.sort_by(|a, b| {if a…

CUDA学习笔记(七)Kernel性能调节

本篇博文转载于https://www.cnblogs.com/1024incn/tag/CUDA/&#xff0c;仅用于学习。 Exposing Parallelism 这部分主要介绍并行分析&#xff0c;涉及掌握nvprof的几个metric参数&#xff0c;具体的这些调节为什么会影响性能会在后续博文解释。 代码准备 下面是我们的kernel…

类和对象介绍

一、类 1.类的声明 class Box{//类名private://私有成员double width,length,height;//长&#xff0c;宽&#xff0c;高 public://公有成员void init(double l,double w,double h){//初始化 lengthl;widthw;heighth;}double S(){//求表面积 return (height*lengthheight*width…

【Lua语法】字符串

Lua语言中的字符串是不可变值。不能像在C语言中那样直接改变某个字符串中的某个字符&#xff0c;但是可以通过创建一个新字符串的方式来达到修改的目的 print(add2(1 , 2 ,15,3))a "no one"b string.gsub(a , "no" , "on1111")print(a) print…

【Python】AttributeError: module lib has no attribute X509_V_FLAG_CB_ISSUER_CHECK

问题&#xff1a; 运行脚本报错&#xff1a;module lib has no attribute X509_V_FLAG_CB_ISSUER_CHECK 原因&#xff1a; pyOpenSSL版本与python版本不匹配 解决方案&#xff1a; window系统 重新安装pyOpenSSL 1、卸载当前版本pyOpenSSL pip uninstall pyOpenSSL2、重新…

flink问题 集合

1.flink 乱码 在配置文件flink-conf.yaml增加配置项&#xff1a;env.java.opts: -Dfile.encodingUTF-8

神经网络的不同类型的层

神经网络可以包含多个不同类型的层&#xff0c;每种层都具有不同的特点和应用场景。以下是常见的神经网络层的分类及其详细特点和应用场景&#xff1a; 1. 输入层&#xff08;Input Layer&#xff09;&#xff1a; 特点&#xff1a;输入层通常不包含任何权重或激活函数&#…

第87步 时间序列建模实战:LSTM回归建模

基于WIN10的64位系统演示 一、写在前面 这一期&#xff0c;我们介绍大名鼎鼎的LSTM回归。 同样&#xff0c;这里使用这个数据&#xff1a; 《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemorrhagic Fever with Renal…

Compose Desktop 使用中的几个问题(分平台加载资源、编写Gradle 任务下载平台资源、桌面特有组件、鼠标键盘事件)

前言 在我之前的文章 Compose For Desktop 实践&#xff1a;使用 Compose-jb 做一个时间水印助手 中&#xff0c;我们使用 Compose For Desktop 写了一个用于读取照片 EXIF 中的拍摄日期参数并以文字水印的方式添加到照片上的桌面程序。 但是事实上&#xff0c;这个程序的名字…