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

Vue3的新特性总结

一、Vue3 里 script 的三种写法

首先,Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法。

1、最基本的 Vue2 写法

<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script>
export default {data() {return {count: 1,};},methods: {onClick() {this.count += 1;},},
}
</script>

2、setup() 属性

<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script>
import { ref } from 'vue';
export default {// 注意这部分setup() {let count = ref(1);const onClick = () => {count.value += 1;};return {count,onClick,};},}
</script>

标签 script setup

<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script setup>
import { ref } from 'vue';const count = ref(1);
const onClick = () => {count.value += 1;
};
</script>

正如你看到的那样,无论是代码行数,还是代码的精简度,

如果你对 Vue 很熟悉,那么,我推荐你使用

因为第一种写法的学习负担更小,先学第一种方式,掌握最基本的 Vue 用法,然后再根据我这篇文章,快速掌握 Vue3 里最需要关心的内容。

第一种写法,跟过去 Vue2 的写法是一样的,所以我们不过多介绍。

第二种写法,所有的对象和方法都需要 return 才能使用,太啰嗦。除了旧项目,可以用这种方式体验 Vue3 的新特性以外,我个人不建议了解这种方式。

所以,接下来,我们主要介绍的,也就是 script setup ,这种写法里需要了解的内容。

注意: setup写在script上的本质上是第二种写法的语法糖,掌握了这种写法,其实第二种写法也基本上就会了。

二、如何使用 script setup 编写组件

1、data——唯一需要注意的地方

整个 data 这一部分的内容,你只需要记住下面这一点。

以前在 data 中创建的属性,现在全都用 ref() 声明。

在 template 中直接用,在 script 中记得加 .value 。

按照官方的推荐要求,建议全部用ref,尽量不要使用reactive。

写法对比

// Vue2 的写法<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script>
export default {data() {return {count: 1,};},methods: {onClick() {this.count += 1;},},
}
</script>
 // Vue3 的写法<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script setup>
import { ref } from 'vue';// 用这种方式声明
const count = ref(1);const onClick = () => {// 使用的时候记得 .valuecount.value += 1;
};
</script>

提示:

1、什么时候用 ref() 包裹,什么时候不用?

要不要用ref,就看你的这个变量的值改变了以后,页面要不要跟着变。

当然,你可以完全不需要关心这一点,跟过去写 data 一样就行。

只不过这样做,你在使用的时候,需要一直 .value。

2、不要解构使用
在使用时,不要像下面这样去写,会丢失响应性。

也就是会出现更新了值,但是页面没有更新的情况

// Vue3 的写法
<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script setup>
import { ref } from 'vue';const count = ref(1);
const onClick = () => {// 不要这样写!!const { value } = count;value += 1;
};
</script>

2、methods

声明事件方法,我们只需要在 script 标签里,创建一个方法对象即可。

剩下的在 Vue2 里是怎么写的,Vue3 是同样的写法。

// Vue2 的写法
<template><div @click="onClick">这是一个div</div>
</template><script>
export default {methods: {onClick() {console.log('clicked')},},
}
</script>// Vue3 的写法
<template><div @click="onClick">这是一个div</div>
</template><script setup>// 注意这部分
const onClick = () => {console.log('clicked')
}</script>

3、props

声明 props 我们可以用 defineProps(),具体写法,我们看代码。

// Vue2 的写法
<template><div>{{ foo }}</div>
</template><script>
export default {props: {foo: String,},created() {console.log(this.foo);},
}
</script>
// Vue3 的写法
<template><div>{{ foo }}</div>
</template><script setup>// 注意这里
const props = defineProps({foo: String
})// 在 script 标签里使用
console.log(props.foo)
</script>

4、emit事件

与 props 相同,声明 emits 我们可以用 defineEmits(),具体写法,我们看代码。

// Vue2 的写法
<template><div @click="onClick">这是一个div</div>
</template><script>
export default {emits: ['click'], // 注意这里methods: {onClick() {this.$emit('click'); // 注意这里},},}
</script>
// Vue3 的写法
<template><div @click="onClick">这是一个div</div>
</template><script setup>// 注意这里
const emit = defineEmits(['click']);const onClick = () => {emit('click') // 注意这里
}</script>

5、computed

// Vue2 的写法
<template><div><span>{{ value }}</span><span>{{ reversedValue }}</span></div>
</template><script>
export default {data() {return {value: 'this is a value',};},computed: {reversedValue() {return value.split('').reverse().join('');},},
}
</script>// Vue3 的写法
<template><div><span>{{ value }}</span><span>{{ reversedValue }}</span></div>
</template><script setup>
import {ref, computed} from 'vue'
const value = ref('this is a value')// 注意这里
const reversedValue = computed(() => {// 使用 ref 需要 .valuereturn value.value.split('').reverse().join('');
})</script>

6、watch

这一部分,我们需要注意一下了,Vue3 中,watch 有两种写法。一种是直接使用 watch,还有一种是使用 watchEffect。
两种写法的区别是:

watch 需要你明确指定依赖的变量,才能做到监听效果。

而 watchEffect 会根据你使用的变量,自动的实现监听效果。

// Vue2 的写法
<template><div>{{ count }}</div><div>{{ anotherCount }}</div><button @click="onClick">增加 1</button>
</template><script>
export default {data() {return {  count: 1,anotherCount: 0,};},methods: {onClick() {this.count += 1;},},watch: {count(newValue) {this.anotherCount = newValue - 1;},},
}
</script>
// Vue3 的写法
<template><div>{{ count }}</div><div>{{ anotherCount }}</div><button @click="onClick">增加 1</button>
</template><script setup>
import { ref, watch } from 'vue';const count = ref(1);
const onClick = () => {count.value += 1;
};const anotherCount = ref(0);// 注意这里
// 需要在这里,
// 明确指定依赖的是 count 这个变量
watch(count, (newValue) => {anotherCount.value = newValue - 1;
})</script>// Vue3 的写法
<template><div>{{ count }}</div><div>{{ anotherCount }}</div><button @click="onClick">增加 1</button>
</template><script setup>
import { ref, watchEffect } from 'vue';const count = ref(1);
const onClick = () => {count.value += 1;
};const anotherCount = ref(0);// 注意这里
watchEffect(() => {// 会自动根据 count.value 的变化,// 触发下面的操作anotherCount.value = count.value - 1;
})</script>

相关文章:

Vue3的新特性总结

一、Vue3 里 script 的三种写法 首先&#xff0c;Vue3 新增了一个叫做组合式 api 的东西&#xff0c;英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法。 1、最基本的 Vue2 写法 <template><div>{{ count }}</div><button click"…...

【Node】Mac多版本Node切换

1、查看当前电脑是否安装node node -v或者查看当前电脑通过brew安装的node路径 ls /usr/local/Cellar/node*2、查看可安装的node brew search node3、安装其他版本node 下载需要安装的node版本 brew install node144、brew切换node版本 假设之前的版本是18&#xff0c;需…...

Apache POI

POI介绍 Apache POI是用Java编写的免费开源的跨平台的Java API&#xff0c; Apache POI提供API给Java程序对Microsoft Office格式档案读和写的功能&#xff0c; 其中使用最多的就是使用POI操作Excel文件。 maven坐标&#xff1a; <dependency><groupId>org.apa…...

个人能做股票期权吗?个人期权交易开户条件新规

个人投资者是可以交易股票期权的&#xff0c;不过期权交易通常需要投资者具备一定的投资经验和风险承受能力&#xff0c;因为期权交易涉及较高的风险和复杂性&#xff0c;下文为大家介绍个人能做股票期权吗&#xff1f;个人期权交易开户条件新规的内容。本文来自&#xff1a;期…...

Java面试整理(一)

开篇 面试,应该都是打工人需要面对的事情。我记得自己以前开始准备Java工程师面试时,都会去看那个《面试宝典》,当时这个“宝典”真的很经典,现在应该还是不少朋友会看这个。我自己经历过了找工作的面试,和企业招聘工作。所以我自己更加想从这两个不同的角度去和大家交流这…...

国家信息中心举办“数字政府建设暨数字安全技术”研讨会:海云安提出数字政府软件供应链安全解决方案

近日&#xff0c;由国家信息中心主办&#xff0c;复旦大学研究院承办的“数字政府建设暨数字安全技术研讨会”在义乌顺利召开。国家信息中心信息与网络安全部副主任禄凯&#xff0c;复旦大学党委常委、宣传部部长陈玉刚&#xff0c;义乌市委常委、常务副市长喻新贵为会议致辞。…...

uniapp 处理 分页请求

我的需求是手机上一个动态滚动列表&#xff0c;下拉到底部时&#xff0c;触发分页数据请求 uniapp上处理分页解决方案 主要看你是如何写出滚动条的。我想到的目前有三种 &#xff08;1&#xff09;页面滚动&#xff1a;直接使用onReachBottom方法&#xff0c;可以监听到达底部…...

最新2米分辨率北极开源DEM数据集(矢量文件)

一、项目背景 美国明尼苏达大学(University of Minnesota)的极地地理空间中心(Polar Geospatial Center, PGC)于2023年8月发布了北极数字高程模型4.1版本(ArcticDEM Mosaic 4.1)。该DEM数据集是革命性的&#xff0c;分辨率达到了2米&#xff0c;而一般的开源DEM数据集分辨率是3…...

【计算机网络】HTTP(下)

本文承接上文的代码进行改造&#xff0c;上文链接&#xff1a;HTTP上 文章目录 1. 实现网站跳转实现 自己的网站跳转 2. 请求方法(get) && 响应方法(post)GET方法POST方法GET与POST的应用场景 3. HTTP状态码在自己设计的代码中发现4043开头的状态码(重定向状态码)永久…...

自学Python03-学会Python中的while循环语句

我们来学习一下怎么使用列表和字典吧&#xff01; 1.列表 首先&#xff0c;我们来学习一下列表。列表是一个有序的集合&#xff0c;它可以包含任何类型的数据&#xff0c;比如数字、字符串或其他列表。我们可以用方括号 [] 来创建一个列表&#xff0c;用逗号分隔各个元素。 …...

PatchMatchNet 学习笔记 译文 深度学习三维重建

9 PatchMatchNet CVPR-2021 patchmatchnet源码下载 PatchMatchNet 代码注释版 下载链接(注释非常详细,较源码结构有调整,使用起来更方便) PatchMatchNet-CVPR-2021(源码、原文+注释+译文+批注) 9.0 主要特点 金字塔,基于传统的PatchMatch算法,精度高,速度快 Pa…...

为什么要使用设计模式,以及使用设计模式的好处

在软件开发中&#xff0c;衡量软件质量只要包含如下指标&#xff1a; 正确性可维护性可读性可扩展性简洁性可测试性健壮性灵活性可复用性 然而&#xff0c;对于一些刚入行的新程序员来说&#xff0c;往往会注意不到上面这些问题&#xff0c;从而产生了一些让人头皮发麻的烂代…...

【Springcloud】Sentinel熔断和降级

【Springcloud】Sentinel熔断和降级 【一】基本介绍【1】什么是熔断和降级【2】为什么使用熔断和降级【3】Sentinel熔断和降级【4】核心概念 【二】下载方式【1】Windows平台安装包下载【2】打开控制台 【三】使用案例【1】添加依赖【2】添加Sentinel配置【3】添加TestUserCont…...

javascript实战开发:json数据求指定元素的和算法

项目需求 在js中&#xff0c;格式如&#xff1a; [{"name": "一(0)班-电量,一(9)班-电流,一(9)班-功率","odata": {"prev_0_day_val_diff": "10.189941,-3.0,79.0",} },{"name": "一(10)班-电量,一(10)班-…...

娱乐时间 —— 用python将图片转为excel十字绘

最近看蛮多朋友在玩&#xff0c;要么只能画比较简单的&#xff0c;要么非常花时间。想了下本质上就是把excel对应的单元格涂色&#xff0c;如果能知道哪些格子要上什么颜色&#xff0c;用编程来实现图片转为excel十字绘应该是很方便的。 图片的每一个像素点都可以数值化&#x…...

OJ练习第160题——LRU 缓存

LRU 缓存 力扣链接&#xff1a;146. LRU 缓存 题目描述 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存 int get(int key) 如果关键字 key 存在于缓…...

使用 Hugging Face Transformer 创建 BERT 嵌入

介绍 最初是为了将文本从一种语言更改为另一种语言而创建的。BERT 极大地影响了我们学习和使用人类语言的方式。它改进了原始 Transformer 模型中理解文本的部分。创建 BERT 嵌入尤其擅长抓取具有复杂含义的句子。它通过检查整个句子并理解单词如何连接来做到这一点。Hugging F…...

unity 控制Dropdown的Arrow箭头变化

Dropdown打开下拉菜单会以“Template”为模板创建一个Dropdown List&#xff0c;在“Template”上添加一个脚本在Start()中执行下拉框打开时的操作&#xff0c;在OnDestroy()中执行下拉框收起时的操作即可。 效果代码如下用于控制Arrow旋转可以根据自己的想法进行修改&#xff…...

Java开发面试--nacos专区

1、 Nacos是什么&#xff1f; 请简要介绍Nacos是什么以及它的主要功能和用途。 答&#xff1a; 简介&#xff1a; Nacos是一个开源的、高性能、动态服务发现、配置和服务管理平台&#xff0c;通常用于微服务架构中。Nacos的名称来源于"Naming"&#xff08;服务发现…...

GB28181学习(三)——心跳保活

心跳保活 要求&#xff1a; 1. 当原设备发现工作异常时&#xff0c;应立即向本SIP监控域的SIP服务器发送状态信息&#xff1b; 2. 无异常时&#xff0c;定时向本SIP监控域的SIP服务器发送状态信息&#xff1b; 3. 状态信息报送采用**MESSGAE**方法&#xff1b; 4. SIP设备宜在…...

黑马JVM总结(三)

&#xff08;1&#xff09;栈内存溢出 方法的递归调用&#xff0c;没有设置正确的结束条件&#xff0c;栈会有用完的一天&#xff0c;导致栈内存溢出 可以修改栈的大小&#xff1a; 再次运行&#xff1a;减少了次数 案例二&#xff1a; 两个类的循环应用问题&#xff0c;导致Js…...

【数据结构】二叉树基础入门

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …...

MFC自定义消息的实现方法----(线程向主对话框发送消息)、MFC不能用UpdateData的解决方法

在MFC中&#xff0c;我们一边在使用多线程时&#xff0c;经常会遇到在需要调用到新建的控件&#xff0c;此时建议不要在新建的线程中直接调用主对话框的控件&#xff0c;我们可以通过自定义消息&#xff0c;在新建线程中发送并触发主线程进行相关的界面控件操作。 以Dialog对话…...

Linux单列模式实现线程池

目录 一、单列模式 1.1 单列模式概念以及实现条件 1.2 饿汉模式 1.1.1 饿汉模式代码实现 1.1.2 饿汉模式特征和优缺点 1.3 懒汉模式 1.3.1 懒汉模式代码实现 1.3.2 懒汉模式特征以及优缺点 二、线程池 2.1 线程池概念 2.2 实现简单线程池逻辑 2.3 模拟实现懒汉模式线程…...

汇川PLC学习Day3:轴控代码编写、用户程序结构说明与任务配置示例、用户变量空间与编址

汇川PLC学习Day3&#xff1a;轴控代码编写、用户程序结构说明与任务配置示例、用户变量空间与编址 一、新建轴与轴控代码编写 1. 新建轴 (1)新建一个轴 &#xff08;2&#xff09;将轴名字更新为实际名字 可以后面实例化后再更改&#xff0c;汇川可以在更新名字时同步更新…...

javaee springMVC Map ModelMap ModelAndView el和jstl的使用

pom依赖 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 …...

vue监听表单输入的身份证号自动填充性别和生日

1&#xff0c;先给表单绑定一个v-model值 <el-input type"number" v-model"form.idCard" placeholder"请输入证件号码" /> 2&#xff0c;使用watch监听输入的值 watch(form, (newName, oldName) > {var numid newName.idCard.split(…...

蓝桥杯官网练习题(翻硬币)

题目描述 小明正在玩一个"翻硬币"的游戏。 桌上放着排成一排的若干硬币。我们用 * 表示正面&#xff0c;用 o 表示反面&#xff08;是小写字母&#xff0c;不是零&#xff09;。 比如&#xff0c;可能情形是&#xff1a;**oo***oooo; 如果同时翻转左边的两个硬币…...

企业架构LNMP学习笔记34

LVS-DR模式&#xff1a; 老师分析&#xff1a; 1、首先用户用CIP请求VIP 2、根据上图可以看到&#xff0c;不管是Director Server还是Real Server上都需要配置VIP&#xff0c;那么当用户请求到达我们的集群网络的前端路由器的时候&#xff0c;请求数据包的源地址为CIP目标地址…...

Python学习之六 循环结构

在很多情况下,我们往往需要循环输入多次,比如,密码最多只能输错3次等。这时候,我们需要使用循环结构。本小节,将学习循环。 一、while循环 while循环的一般形式如下: while 判断条件: 循环语句块 当判断条件为真,便执行循环语句块。比如说,我们需要写一个判断账号…...

合肥网站制作公司排名/可以放友情链接的网站

今天比较闲&#xff0c;公司没任务&#xff0c;就来写文章&#xff0c;这篇文章就是纯记录异常了&#xff0c;写的比较少&#xff0c;大家如果学习python&#xff0c;关注我&#xff0c;我们一起努力&#xff0c;一起成长 从入门开始&#xff0c;python学习&#xff08;五&…...

长宁区小学网站建设/农产品网络营销

无重复字符的最长子串:Python实现滑动窗口算法 在日常编程中,我们经常需要解决字符串相关问题。例如,如何在一个字符串中寻找最长的无重复字符的子串?这个问题看似简单,但是其实需要运用到高级数据结构和算法。在本文中,我们将介绍如何用Python实现滑动窗口算法来解决这个…...

wordpress跳转外链/湖北权威的百度推广

在USART的发送端有2个寄存器&#xff0c;一个是程序可以看到的USART_DR寄存器,另一个是程序看不到的移位寄存器,对应USART数据发送有两个标志&#xff0c;一个是TXE发送数据寄存器空&#xff0c;另一个是TC发送结束。 当USART_DR中的数据传送到移位寄存器后&#xff0c;TXE被设…...

网站建设的内容策略/郑州网站seo顾问

# -auth组件 # -auth是什么? # -django内置的用户认证系统,可以快速的实现,登录,注销,修改密码.... # -怎么用? # -(1)先创建超级用户: # -python3 manage.py createsuperuser # -输入用户名,邮箱(…...

专注苏州网站建设/重庆人力资源和社会保障网官网

Afinal是一个orm、ioc框架&#xff0c;遵循约定大于配置原则&#xff0c;无需任何配置即可完成所有工作&#xff0c;但也可以通过配置达到个人的个性化需求。Afinal提倡代码快速简洁&#xff0c;尽量一行代码完成的事情不会用两行。Afinal里面目前包含了四大组件&#xff1a;Fi…...

打造自己的网站/网络营销软件条件

有时候 go get 比较慢&#xff0c;可以考虑用迅雷等下载工具下载下来&#xff0c;然后再本地安装&#xff0c; 如&#xff1a;code.google.com/p/go.net/websocket&#xff0c;如何安装这些离线包&#xff1f; 先在你的 GOPATH 目录&#xff08;如果不懂 GOPATH&#xff0c;请先…...