vue3(一):Vue3简介、创建vue3工程、Vue3中的响应式

news/2024/6/21 4:34:03/文章来源:https://blog.csdn.net/Hdhhdhbsjxbdhvyg/article/details/138607472

目录

一.Vue3简介

1.性能提升

2.源码升级

3.拥抱ts

4.新特性

(1)Composition API(组合API):

(2)新的内置组件:

(3)其他改变:

二.创建vue3工程

1.使用vue/cli创建(基于webpack)

2.使用vite创建(推荐)

优势:

3.分析工程结构

​编辑

4.编写App组件

5.OptionsAPI和CompositionAPI

6.setup

7.setup和OptionsAPI(面试题)

8.setup语法糖

三、vue3中的响应式

1.ref函数

(1)简单数据类型:

(2)复杂数据类型:

2.reactive函数

处理对象数据类型:

处理数组数据类型:

3.reactive和ref的对比

(1)定义的角度

(2)原理的角度

(3)使用的角度

4.toRefs和toRef

(1)toRefs

(2)toRef


编码规范:采用ts+组合式API+setup语法糖

一.Vue3简介

1.性能提升

打包速度快、内存小、渲染快

2.源码升级

使用proxy代替defineProperty实现响应式

重写虚拟Dom实现和Tree-Shaking

3.拥抱ts

4.新特性

(1)Composition API(组合API):

setup
ref与reactive
computed与watch

(2)新的内置组件:

Fragment
Teleport
Suspense

(3)其他改变:

新的生命周期钩子

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

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

二.创建vue3工程

1.使用vue/cli创建(基于webpack)

首先查一下vue / cli的版本:

vue -V或者vue --version

在桌面上添加工程(cd desktop)

苹果电脑需要加上sudo : sudo vue create vue3_test

2.使用vite创建(推荐)

在前端中,webpack是构建工具里的老大哥

vite:新一代的前端构建工具,跟webpack等价,后端的maven跟npm差不多

优势:

开发环境中,无需打包操作,可快速的冷启动。

轻量快速的热重载(HMR)。

真正的按需编译,不再等待整个应用编译完成。

对ts、jsx、css开箱即用

上图是webpack,下面是vite

创建工程:sudo npm create vue@latest

暂时不需要vue router,之后学到了再去配置

运行速度是大大滴快啊,但是暂时不关注这个

3.分析工程结构

extensions.json显示安装的插件

src:源代码文件,前端的所有工作

gitignore:git 的忽略文件

env.d.ts:让程序能认识jpg、txt等文件格式,如果飘红那就是因为没有安装依赖

入口文件不再是main.js,是index.html

拿到手一个前端项目怎么去启动?

找到package.json的dev   :npm run dev

依赖管理包:

ts的配置文件:

vite.config.ts:整个工程的配置文件

可以安装插件和配置代理

4.编写App组件

我们在入口文件index.html里引入了main.ts,所以接下来就去写这个

//引入createApp用于创建应用
//createApp类似花盆
import {createApp} from 'vue'//引入App根组件
//App类似花的根
import App from './App.vue'
//createApp(App)把花插在花盆里
createApp(App).mount('#app')
//mount('#app')把花摆在app这个容器里,这个app在index里

所以index.html里面必须得引入main.ts和写一个容器(app)

Vue3中是通过createApp函数创建一个应用实例。

5.OptionsAPI和CompositionAPI

vue2采用的是OptionsAPI,选项式的,name、data、methods等等的都是配置项

vue3采用的是CompositionAPI,组合式的

在vue2中,如果你想去改一个功能,你就得去各个配置项中都去修改很麻烦

vue3中,把这些分散的配置项合并为单独的函数,每个功能就是一个独立的函数

6.setup

setup是Vue3中一个新的配置项,值是一个函数。

data和methods、computed、、、、都不要了,直接都写在setup里

如果return返回的是对象的话,可以直接在template中使用

注意:setup前面不能加async,加上之后返回值就不是一个对象了,是被promise包裹的对象

<template><div class="person"><h2>{{ sex }}</h2><button @click="showTel">点击展示号码</button><button @click="changeSex">点击改变性别</button></div>
</template><script>
export default {
name:'person',
setup(){//以前是写在data中的,现在这里的数据都不是响应式数据let sex='男'let tel=183function showTel(){alert(tel)}function changeSex(){sex='女'console.log(sex)//女//这里性别确实被改变了,但是页面没有变化}return {sex,tel,showTel,changeSex}
}
}
</script>

下面不return,上面是不能用的

注意:(1)vue3中的this是不奏效的

(2)这里的let中写的数据不能实现响应式,函数更改性别之后页面没有变化但是sex已经更改

(3)setup的返回值也可以是一个渲染函数

返回的是函数,最终渲染到页面上,不管你写的什么函数和变量最终返回的都是‘哈哈’

(4)setup要发生在beforeCreated之前的

7.setup和OptionsAPI(面试题)

也就是说setup可不可以和传统的配置项同时写,同时写了要以谁为主?

<template><div class="person"><h2>{{ sex }}</h2><h2>{{ name }}</h2><h2>{{ c }}</h2><button @click="showTel">点击展示号码</button><button @click="changeSex">点击改变性别</button></div>
</template><script>
export default {
name:'person',
data(){return {sex:'nv',tel:183,c:this.name}
},
methods:{
showTel(){
alert(this.tel+'hhh')
}
},
setup(){//以前是写在data中的,现在这里的数据都不是响应式数据let sex='男'let tel=183let name='aa'function showTel(){alert(tel)}function changeSex(){sex='女'console.log(sex)//女//这里性别确实被改变了,但是页面没有变化}return {
```

(1)首先看data中this调用setup中的name,发现name和c都可以显示在页面上,说明data可以通过this调用setup中的数据,虽然vue3的this不奏效。(setup在beforeCreated之后,所以this 的时候可以取到setup中的了)

反过来的话,在setup中是不能调用到data中的数据的。

(2)然后我尝试用data、methods和setup中的数据与方法重命名,发现data中的不管放在setup前后都不奏效,但是函数是谁在后面谁奏效

8.setup语法糖

每次写setup()还要return把数据交出去很费事,一个简单方式:

在script标签里加上setup,这样它自动给你return数据了,直接在script里写setup函数的东西(不用return就行)

但是这么写有一个问题,没有export和name之后我想设置名字咋办呢,再写一个script专门为他写名字多麻烦,下载插件:pm i vite-plugin-vue-setup-extend -D

然后去vite.config.ts里引用

import VueSetupExtend from 'vite-plugin-vue-setup-extend'
,,,
plugins: [vue(),VueSetupExtend(),],//在插件里追加一句调用

然后就可以直接在script标签里写name了,但是使用情况不多,一般就是文件名和组件名一致

三、vue3中的响应式

vue2中写在data中的数据就是响应式的,因为默认做了数据代理和数据劫持。

vue2中实现响应式都是通过Object.defineProperty去监听getter和setter有没有被调用,调用之后去返回数据或者把新数据更新到页面上,这样来实现读或修改,但是你要是去删除一个已经存在的属性或者添加一个没有的属性都不行,都捕获不到的。

就得用this.$set/Vue.set 添加 用 this.$delete/Vue.delete删除

数组的话还可以用this.splice来修改数据

vue2里面,只赋值数组下标不能实现响应式。

vue3中有两种方式定义响应式数据:ref、reactive

通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写、属性的添加、属性的删除等。
通过Reflect(反射):对源对象的属性进行操作。

1.ref函数

作用:定义一个响应式的数据

首先引入:import {ref} from 'vue'

(1)简单数据类型:

只用普通的let name=‘’ 是不能进行后续修改的,ref可以实现响应式对象,加工完之后的name变成ref引用对象,就把它变成一个响应式的了

<template><h1>hhh</h1><h2>{{ name }}</h2><h2>{{ age }}</h2><button @click="changeData">点击改数据</button><!-- test2() -->
</template><script>
import {ref} from 'vue'
export default {name: "App",setup() {let name = ref('tt');let age = ref(18);function changeData() {name.value='h',age.value=48console.log(name,age)}

带下划线的(_value,_rawValue)等等都不用你管,不带下划线的value是我们应该看的。

响应式依然是靠Object.defineProperty()的get与set完成的。(js里面)修改值的话就.value,但是在template用的时候却不用.value,因为它检测到你是ref引用对象,就自动读取value。

数据响应式:ref

修改数据/Js中用:.value

模版上呈现(template):直接写

(2)复杂数据类型:

let job=ref({salary:'30k',mingzi:'前端'})

复杂数据的value里有type(mingzi)和salary,但是它俩不是靠ref实现的,而是变成proxy的代理对象(内部求助reactive函数),所以修改值的时候不用写成job.value.salary.value

function jiaxin(){// job.salary.value='40k'job.value.salary='40k'}

为什么.value要写在中间而不是后面呢,准确来说.value应该紧跟let后面的名字,因为xx.value之后才能摸到这个对象/数组,如果遇到数组的话就是a.value[0].name。

2.reactive函数

作用:定义一个对象类型的响应式数据(基本类型不要用reactive,用ref)

语法:const代理对象=reactive源对象,返回一个代理对象(proxy实例对象,简称proxy对象)

首先引入:import {reactive} from 'vue'

处理对象数据类型:

let car=reactive({price:100,brand:'奔驰'})

调用的时候不用再value了,直接调用car输出的是proxy对象

function add() {console.log(car);car.price +=10;}

而且reactive可以深层次的处理数据。

处理数组数据类型:

let hobby=reactive(['抽烟','喝酒','打麻将'])

修改:

hobby[0]='学习'

vue2中修改马冬梅的时候,不能直接用索引号赋值修改,得用push啥啥的方法来实现响应式

3.reactive和ref的对比

(1)定义的角度

ref经常定义基本数据类型,reactive定义数组、对象数据类型

注:ref也可以定义数组、对象数据类型,内部通过reactive转为代理对象

(2)原理的角度

ref通过 object.defineProperty()的get与set来实现响应式(数据劫持)。

reactive通过使用Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据。

(3)使用的角度

ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value

reactive定义的数据:操作数据与读取数据:均不需要.value

注:(1)ref里的value可以通过插件添加,就不用自己加了:

打开设置里的vue,勾上这个就自动添加

(2)如果想整体改变reactive写好的car对象时,用Object.assign

 function changeCar(){Object.assign(car,{brand:'qq',price:'1'})}

想整体改变ref定义的car对象的话

function changeCar(){// Object.assign(car,{brand:'qq',price:'1'})car.value={brand:'qq',price:1}}

4.toRefs和toRef

(1)toRefs

作用:把响应式对象里的数据拿出来并且这些数据仍然是响应式的

先来看下面的代码

<template><div class="person"><h2>{{ person.name }}</h2><h2>{{ person.age }}</h2><h2>{{ name }}</h2><h2>{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button></div>
</template><script setup lang="ts">
import {reactive} from 'vue'
let person=reactive({name:'tt',age:18
})
let {name,age}=personfunction changeName(){name+='~'console.log(name,person.name)}function changeAge(){age++console.log(age,person.age)}
</script>

name和age+都是改的你解构出来的name和age,而不是person的,所以person 的数据都不变

后台数据变化但是页面上的数据都没变,因为解构出来的不是响应式的数据

let {name,age}=toRefs(person) function changeName(){name.value+='~'console.log(name.value,person.name)}function changeAge(){age.value++console.log(age.value,person.age)}

加上toRefs之后就是从reactive定义的person对象里拿ref定义的所有属性(name和age),现在的name和age也是person 的name和age了,而且也实现了响应式

(2)toRef

toRef就是一个一个拆出来

let ll=toRef(person,'age')

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

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

相关文章

基于 IP 的 DDOS 攻击实验

一、介绍 基于IP的分布式拒绝服务&#xff08;Distributed Denial of Service, DDoS&#xff09;攻击是一种利用大量受控设备&#xff08;通常是僵尸网络&#xff09;向目标系统发送大量请求或数据包&#xff0c;以耗尽目标系统的资源&#xff0c;导致其无法正常提供服务的攻击…

kafka-消费者组-点对点测试

文章目录 1、点对点测试1.1、获取 kafka-consumer-groups.sh 的帮助信息1.2、列出所有的 消费者组1.3、创建消费者1并指定组 my_group11.4、创建消费者2并指定组 my_group11.5、创建消费者3并指定组 my_group11.6、创建生产者发送消息到 my_topic1 主题1.6.1、发送第一条消息ro…

docker-compose 映射端口失败! docker端口映射失败 ,docker映射只能使用老端口,映射无法使用

1. 现象 使用docker-compose 启动项目&#xff0c;发现映射端口出现问题&#xff0c;不能映射端口&#xff01; 如图&#xff1a; 使用原来端口是可以使用的 2. 问题原因&#xff1a; 使用了docker-mode 为host模式&#xff0c;所以不能换端口&#xff0c;只能写为"8086:…

1.Redis之初识Redis分布式系统

1.初识Redis 1.1 官网 Redis中文网 Redis 教程 | 菜鸟教程 (runoob.com) 1.2 解释 在内存中存储数据 定义变量,不就是在内存中存储数据嘛?? Redis 是在分布式系统&#xff08;进程的隔离性&#xff1a;Redis 就是基于网络&#xff0c;可以把自己内存中的变量给别的进程…

Big Demo Day第十三期活动即将启幕,Web3创新项目精彩纷呈,PEPE大奖等你抽取

5月28号在香港数码港 Big Demo Day第十三期 活动即将拉开帷幕&#xff0c;活动将汇集众多Web3领域的创新项目&#xff0c;为参会者带来一场科技与智慧交融的盛宴。在这里&#xff0c;你不仅能深入了解区块链、AI等前沿技术的最新应用&#xff0c;还能有机会赢取丰厚的PEPE大奖。…

matplotlib ---词云图

词云图是一种直观的方式来展示文本数据&#xff0c;可以体现出一个文本中词频的使用情况&#xff0c;有利于文本分析&#xff0c;通过词频可以抓住一篇文章的重点 本文通过处理一篇关于分析影响洋流流向的文章&#xff0c;分析影响洋流流向的主要因素都有哪些 文本在文末结尾 …

第十三届蓝桥杯国赛大学B组填空题(c++)

A.2022 动态规划 AC; #include<iostream> #define int long long using namespace std; int dp[2050][15]; //dp[i][j]:把数字i分解为j个不同的数的方法数 signed main(){dp[0][0]1;for(int i1;i<2022;i){for(int j1;j<10;j){//一种是已经分成j个数,这时只需每一个…

The Sandbox 和 Bitkub 联手增强东南亚元宇宙中心

作为去中心化游戏虚拟世界和区块链平台的先驱&#xff0c;The Sandbox 正与泰国领先的区块链网络 Bitkub Blockchain Technology Co., Ltd. 展开创新合作。双方合作的目的是将Bitkub元宇宙的影响力扩展到The Sandbox&#xff0c;建立一个元宇宙中心&#xff0c;向用户承诺从 Bi…

如何在OrangePi AIpro智能小车上实现安全强化学习算法

随着人工智能和智能移动机器人的广泛应用&#xff0c;智能机器人的安全性和高效性问题受到了广泛关注。在实际应用中&#xff0c;智能小车需要在复杂的环境中自主导航和决策&#xff0c;这对算法的安全性和可靠性提出了很高的要求。传统的强化学习算法在处理安全约束时存在一定…

Mesa软件框架以及重要数据结构分析

Mesa软件框架以及重要数据结构分析 引言 Mesa的实现比较复杂&#xff0c;其中还有许多的数据结构之间的关系逻辑还不是很清楚。感觉分析了又没有分析一样&#xff0c;这里我们再理一理&#xff01; 1.1 Mesa下EGL/GL核心数据结构和层级关系 MESA的核心数据结构很多很复杂&#…

Hotcoin Research | 市场洞察:2024年5月13日-5月19日

加密货币市场表现 目前&#xff0c;加密货币总市值为1.32万亿&#xff0c;BTC占比54.41%。 本周行情呈现震荡上行的态势&#xff0c;BTC在5月15日-16日&#xff0c;有一波大的拉升&#xff0c;周末为震荡行情。BTC现价为67125美元。 上涨的主要原因&#xff1a;美国4月CPI为3…

中国新能源产业助推全球绿色发展

中国车企长城汽车旗下电动汽车品牌欧拉好猫1月12日在泰国罗勇新能源汽车制造基地正式下线,这是泰国本土生产的第一款量产纯电动汽车。图为工人在生产车间内工作。新华社发【中国经济亮色与世界发展机遇】在绿色发展理念指引下,中国新能源产业通过多年自主技术创新、供应链整合…

软件架构设计之质量属性浅析

引言 在数字化浪潮席卷而来的今天&#xff0c;软件已经渗透到我们生活的方方面面&#xff0c;从手机APP到大型企业级系统&#xff0c;无一不彰显着软件技术的魅力。然而&#xff0c;在这背后&#xff0c;软件架构设计作为软件开发的基石&#xff0c;其质量属性的重要性不言而喻…

计算属性与监听属性

【 1 】计算属性 计算属性大致就是这样 # 1 计算属性是基于它们的依赖进行缓存的# 2 计算属性只有在它的相关依赖发生改变时才会重新求值# 3 计算属性就像Python中的property&#xff0c;可以把方法/函数伪装成属性 # 计算属性本质上是一个函数&#xff0c;它们可以通过 get…

行为设计模式之状态模式

文章目录 概述定义结构图 2.代码示例小结 概述 定义 状态模式(state pattern)的定义: 允许一个对象在其内部状态改变时改变它的行为。 对象看起来似乎修改了它的类。 状态模式就是用于解决系统中复杂对象的状态转换以及不同状态下行为的封装问题.。状态模式将一个对象的状态…

git拉取项目前需要操作哪些?

1.输入 $ ssh-keygen -t rsa -C "秘钥说明" 按enter键 2.出现 ssh/id_rsa&#xff1a;(输入也可以不输入也可以) 然后按enter键 3.出现empty for no passphrase&#xff1a;(输入也可以不输入也可以) 然后按enter键 4.出现same passphrase again: (输入也可以不输入也…

数据库技术基础

数据库技术基础 导航 文章目录 数据库技术基础导航一、基础概念数据库系统数据库管理系统DBMS分类数据库技术的发展数据库体系结构 二、数据模型数据模型基本概念 三、数据库的控制功能事务概述SOL中事务定义语句日志文件故障种类两个操作Undo/Redo事务故障的恢复系统故障的恢…

RT-DETR算法改进【NO.1】借鉴CVPR2024中的StarNet网络StarBlock改进算法

前 言 YOLO算法改进的路有点拥挤,尝试选择其他的baseline作为算法研究,可能会更加好发一些文章。后面将陆续介绍RT-DETR算法改进的方法思路。 很多朋友问改进如何选择是最佳的,下面我就根据个人多年的写作发文章以及指导发文章的经验来看,按照优先顺序进行排序讲解…

电子围栏(地理围栏)设计逻辑

做完整的项目时需要考虑安全问题&#xff0c;判断车辆在不该出现的位置出现时自动刹车。 只能说可以有吧。 地理围栏的概念 自动驾驶地理围栏是指在自动驾驶系统中定义的一种虚拟边界&#xff0c;用于限制车辆的运行范围。地理围栏可以通过全球定位系统&#xff08;GPS&#…

CRMEB开源商城系统:全开源、高灵活性的电商解决方案

一、引言 随着电子商务的飞速发展&#xff0c;越来越多的企业和个人开始关注如何快速搭建一个稳定、高效且功能丰富的在线商城系统。在这样的背景下&#xff0c;CRMEB开源商城系统应运而生&#xff0c;凭借其前后端分离的架构、丰富的功能模块以及易用性&#xff0c;成为了众多…