Vue3中Setup概述和使用(三)

一、引入Setup

1、Person.Vue

与Vue3编写简单的App组件(二) 中的区别是:取消data、methods等方法,而是将数据和方法定义全部放进setup中。

<template><div class="person"><h1>姓名:{{name}}</h1><h1>年龄:{{age}}</h1><button :onclick="changeName">修改姓名</button><button :onclick="changeAge">修改年龄</button><button :onclick="showTel">查看电话</button></div></template><script lang="ts">export default {name: 'Person',setup() {console.log(this) //setup中的this是undefined,vue3中弱化了thislet name = "Maple" //变量还不是响应式,所以变量值变更并不会使页面发生同步变化let age = 28let tel = 13943232232function changeName() {//注意:这样修改,虽然name值确实修改了,但页面不会有变化(下同)name = "Kelly" //此时Kelly}function changeAge() {age += 1}function showTel() {alert(tel)}// 需要返回,template中才能够读取到数据return { name, age, tel, changeName, changeAge, showTel }}}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

2、App.Vue

<template><!-- 写html --><h1>我是Maple:</h1><div class="app"><Person /></div></template><script lang="ts">import Person from './components/Person.vue'// 写js或者tsexport default {name: 'App', //组件名components: { Person }}
</script><style>/* 写样式 */.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

3、页面效果

注意:此时`修改姓名`和`修改年龄`按钮并不会生效,因为数据还不是响应式的。

二、Setup语法糖

以上方式中,在Setup中定义的变量和方法需要return出去,才能够被模板引用,如果变量和方法过多,就会比较繁琐,由此引入setup语法糖

 Person.vue文件完整源码

<template><div class="person"><h1>姓名:{{name}}</h1><h1>年龄:{{age}}</h1><button :onclick="changeName">修改姓名</button><button :onclick="changeAge">修改年龄</button><button :onclick="showTel">查看电话</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">let name = "Maple"let age = 28let tel = 13943232232function changeName() {name = "Kelly"}function changeAge() {age += 1}function showTel() {alert(tel)}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

三、ref和reactive实现响应式数据

1、ref基本类型响应式数据使用

适用对象:基本数据类型,使用步骤如下:

(1) 引入ref

 import {ref} from 'vue'

(2) 使用ref修饰数据

let name = ref('Maple')

(3) 调用变量并修改数据

# 注意要加value,才能够获取变量(被包装之后的)对应的值
name.value == 'Maple'

Person.vue完整代码如下:

<template><div class="person"><h1>姓名:{{name}}</h1><h1>年龄:{{age}}</h1><button :onclick="changeName">修改姓名</button><button :onclick="changeAge">修改年龄</button><button :onclick="showTel">查看电话</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">//1. 首先从vue引入refimport { ref } from 'vue'//2.然后使用reflet name = ref('Maple')let age = ref(28)let tel = 13943232232function changeName() {//3.注意要加value,才能够获取变量(被包装之后的)对应的值if (name.value == 'Maple') {name.value = 'Kelly'} else {name.value = 'Maple'}}function changeAge() {age.value += 1}function showTel() {alert(tel)}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

2、ref对象类型响应式数据使用

适用对象:ref同时支持对象类型的响应式

<template><div class="person"><h1>电脑信息:</h1><h1>电脑品牌:{{computer.brand}}</h1><h1>电脑价格:{{computer.price}}</h1><h1>学生信息:</h1><ul><li v-for="item in students" :key="item.name">{{item.age}}</li></ul><!-- 修改电脑价格 --><button :onclick="changePrice">修改电脑价格</button><!-- 修改第一个学生的年龄 --><button :onclick="changeAge">修改学生年龄</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">//1. 首先从vue引入refimport { ref } from 'vue'//2.然后使用reflet computer = ref({ brand: 'hp', price: 5500 })let students = ref([{ name: 'Maple', age: 30 },{ name: 'Kelly', age: 35 },{ name: 'Max', age: 12 }])function changePrice() {//需要通过value取值computer.value.price = 5000}function changeAge() {//需要通过value取值students.value[0].age = 44}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

3、reactive使用

适用对象:只支持对象类型数据,使用步骤如下:

(1) 引入reactive

import { reactive } from 'vue'

(2) 使用reactive修饰数据

let computer = reactive({ brand: 'hp', price: 5500 })

(3) 修改数据

 computer.price = 5000

  Person.vue文件完整源码

<template><div class="person"><h1>电脑品牌:{{computer.brand}}</h1><h1>电脑价格:{{computer.price}}</h1><ul><li v-for="item in students" :key="item.name">{{item.age}}</li></ul><!-- 修改电脑价格 --><button :onclick="changePrice">修改电脑价格</button><!-- 修改第一个学生的年龄 --><button :onclick="changeAge">修改学生年龄</button><!-- 修改歌手姓名 --><button :onclick="ChangeSinger">修改歌手姓名</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">//1. 首先从vue引入refimport { reactive } from 'vue'//2.然后使用reflet computer = reactive({ brand: 'hp', price: 5500 })let students = reactive([{ name: 'Maple', age: 30 },{ name: 'Kelly', age: 35 },{ name: 'Max', age: 12 }])let singer = {a: {b: {c: 'Jay'}}}function changePrice() {computer.price = 5000}function changeAge() {students[0].age = 44}function ChangeSinger() {singer.a.b.c = '毛不易'}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

4、ref和reactive的区别

(1)ref支持基本类型对象类型数据;reactive仅支持对象类型数据

(2)ref获取变量值需要使用.value,而reactive直接通过变量获取

(3)针对对象的一次性修改,两者方式不一样,具体可参照如下案例:

<template><div class="person"><h1>电脑信息:</h1><h1>电脑品牌:{{computer.brand}}</h1><h1>电脑价格:{{computer.price}}</h1><h1>学生信息:</h1><ul><li v-for="item in students" :key="item.name">{{item.name}}:{{item.age}}</li></ul><!-- 修改电脑 --><button :onclick="changeComputer">修改电脑</button><!-- 修改学生 --><button :onclick="changeStudents">修改学生</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">//1. 首先从vue引入refimport { ref, reactive } from 'vue'//2.然后使用ref和reactivelet computer = ref({ brand: 'hp', price: 5500 })let students = reactive([{ name: 'Maple', age: 30 },{ name: 'Kelly', age: 35 },{ name: 'Max', age: 12 }])function changeComputer() {//ref修饰对象,可以通过以下方式直接替换computercomputer.value = { brand: 'HTC', price: 600 }}function changeStudents() {// students = {name:'Jacky',age:50} //这么写页面不更新的// students = reactive({name:'Jacky',age:50}) //这么写页面不更新的,因为此时students已经是一个新对象// reactive 修饰对象,下面这个写法页面可以实现更新Object.assign(students, [{ name: 'Jacky', age: 50 }, { name: 'Kitty', age: 20 },{ name: 'Lily', age: 22 }])}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

5、to_refs和to_ref

<template><div class="person"><h1>电脑信息:</h1><h1>电脑品牌:{{computer.brand}}</h1><h1>电脑价格:{{computer.price}}</h1><h1>个体信息</h1><h1>姓名:{{person.name}}</h1><h1>年龄{{person.age}}</h1><!-- 修改电脑 --><button :onclick="changeComputer">修改电脑</button><!-- 修改姓名 --><button :onclick="changeName">修改学生姓名</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">//1. 首先从vue引入refimport { reactive, toRefs, toRef } from 'vue'//2.然后使用reactivelet computer = reactive({ brand: 'hp', price: 5500 })// 使用toRefs从computer这个响应式对象中,解构出brand、price,且brand和price依然是响应式的// brand和price的值是ref类型,其value值指向的是computer.brand和computer.pricelet { brand, price } = toRefs(computer)let person = reactive({ name: 'maple', age: 30 })// 使用toRef从person这个响应式对象中,解构出name,且name依然是响应式的let name = toRef(person, 'name')// 修改电脑信息function changeComputer() {brand.value = 'HTC'price.value = '8000'}// 修改个人姓名function changeName() {name.value = 'Avery'}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

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

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

相关文章

SQL、Hive中的SQL和Spark中的SQL三者联系与区别

SQL、Hive中的SQL和Spark中的SQL&#xff08;即SparkSQL&#xff09;都是用于处理和分析数据的查询语言&#xff0c;但它们在实现、性能、应用场景等方面存在一些明显的区别和联系。 联系&#xff1a; 分布式计算&#xff1a;三者都是分布式计算的引擎&#xff0c;都可以在大数…

2023-12蓝桥杯STEMA 考试 Python 中高级试卷解析

蓝桥杯STEMA 考试 Python 中高级试卷(12 月) 一、选择题 第一题 以下哪项是取余运算符?( C ) A、* B、// C、% D、+ 第二题 已知:s = "python",执行 print(s[::2])语句后,输出的结果是( B )。 A 、 python B 、pto C 、 nohtyp D 、 yhn …

像素、分辨率、公差的概念

像素 &#xff08;Pixel&#xff09; 像素是指在由一个数字序列表示的图像中的一个最小单位。像素的多少表明相机所含有的感光元件的多少。所谓 200 万像素 CCD 就是一个由 200 万个光电二极管构成的集合体。一台100万像素的相机拍摄的照片洗成5寸比洗成六寸清晰点。80万 1024…

Acwing---839. 模拟堆

模拟堆 1.题目2.基本思想3.代码实现 1.题目 维护一个集合&#xff0c;初始时集合为空&#xff0c;支持如下几种操作&#xff1a; I x&#xff0c;插入一个数 x&#xff1b;PM&#xff0c;输出当前集合中的最小值&#xff1b;DM&#xff0c;删除当前集合中的最小值&#xff08…

好看的登录界面源码,希望您喜欢

闲来无事&#xff0c;写几个好看的html界面玩一玩&#xff01; 登录界面一&#xff1a; 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-widt…

MySQL表的基础操作

创建表 create table 表名&#xff08;列名 类型&#xff0c;列名 类型……&#xff09; 注意 1.在进行表操作之前都必须选中数据库 2.表名&#xff0c;列名等一般不可以与关键字相同&#xff0c;如果确定相同&#xff0c;就必须用反引号引住 3.可以使用comment来增加字段说…

倒计时57天

3-1知识点续&#xff1a; 5. //给string设置大小&#xff1a; /* 1.s.resize(N):resize&#xff08;&#xff09;函数可以改变string的大小&#xff0c;并根据需要添加或删除字符。如果新的大小比当前大小大&#xff0c;将会在末尾添加字符&#xff1b;如果新的大小比当前大小…

c++水仙花数

一.什么是水仙花数 水仙花数是一个三位数它的个位,十位,百位的三次幂相加的和为他本身 例如:1*1*15*5*53*3*3153及153为水仙花数 二.代码 三.样例

98.网游逆向分析与插件开发-网络通信封包解析-定位明文发送数据的关键函数

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;项目需求与需求拆解 通过上一个内容有了对网络通信架构有一个简单认识了解&#xff0c;对于我们重要的点是 组织数据 到 加密数据之间的过程&#xff0c;这个过程的数据我们是可以看懂的&#xff0c;…

【python5】闭包/装饰器,

文章目录 1.闭包和装饰器&#xff1a;函数里return就是闭包2.解析eeprom&#xff1a;如下是二进制文件&#xff0c;C8是一个字节3.json/configparser/optparse&#xff1a;json.dumps&#xff08;将字典转化为字符串&#xff0c;将json信息写进文件&#xff09;&#xff0c;jso…

Swagger2

Swagger2 引入依赖 <!-- springfox-swagger2 --><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.10.5</version></dependency>编写配置 @Configuration public …

探讨一下“概念”

概念&#xff08;Idea&#xff1b;Notion&#xff1b;Concept&#xff09;是人类在认识过程中&#xff0c;从感性认识上升到理性认识&#xff0c;把所感知的事物的共同本质特点抽象出来&#xff0c;加以概括&#xff0c;是自我认知意识的一种表达&#xff0c;形成概念式思维惯性…

华为环网双机接入IPTV网络部署案例

环网双机接入IPTV网络部署案例 组网图形 图2 环网双机场景IPTV基本组网图 方案简介配置注意事项组网需求数据规划配置思路操作步骤配置文件 方案简介 随着IPTV业务的迅速发展&#xff0c;IPTV平台承载的用户也越来越多&#xff0c;用户对IPTV直播业务的可靠性要求越来越高。…

振荡器设计

目录 简介基本参数基本图示起振条件:振荡器的设计例题1例题2例题3例题4简介 理想的振荡器能够产生恒定赋值的波。可以将振荡器看做是一个零激励的情况下能够产生输出的二端口网络。 振荡器有不同的方法来解释定义:反馈振荡器,负阻抗振荡器。 基本参数 振荡器的参数可以用一…

数据原理与数据库。

数据是一切解算与设计的基础。数据可以按以下方式分类&#xff1a;基础数据&#xff0c;事物的数据底&#xff0c;底层算法的关键数据&#xff0c;数据结构&#xff0c;结构化数据&#xff0c;元数据&#xff1b;哈希数据&#xff0c;分类数据&#xff0c;排序数据&#xff1b;…

图灵日记--MapSet字符串常量池反射枚举Lambda表达式泛型

目录 搜索树概念实现性能分析和 java 类集的关系 搜索概念及场景模型 Map的使用Map常用方法 Set的说明常见方法说明 哈希表冲突-避免-负载因子调节冲突-解决-闭散列冲突-解决-开散列/哈希桶冲突严重时的解决办法 实现和 java 类集的关系 字符串常量池String对象创建intern方法 …

深入理解Go的垃圾回收机制

导语 如果你是一位Golang的开发者&#xff0c;你一定对于语言特性和详细结构有所了解。但是&#xff0c;你是否曾经停下来深入研究过Golang背后复杂而强大的垃圾回收&#xff08;GC&#xff09;机制&#xff1f;在这篇文章中&#xff0c;我们将具体深入探讨Golang垃圾回收机制…

机器学习系列——(十五)随机森林回归

引言 在机器学习的众多算法中&#xff0c;随机森林以其出色的准确率、对高维数据的处理能力以及对训练数据集的异常值的鲁棒性而广受欢迎。它是一种集成学习方法&#xff0c;通过构建多个决策树来进行预测和分类。本文将重点介绍随机森林在回归问题中的应用&#xff0c;即随机…

DP读书:《openEuler操作系统》(九)从IPC到网卡到卡驱动程序

DP读书&#xff1a;《openEuler操作系统》从IPC到网卡到卡驱动程序&#xff09; 上章回顾_SPI上节回顾_TCP 网卡驱动程序简介1.设备驱动2.总线与设备3.网卡及其抽象 驱动程序的注册与注销1. 注册2. 注销 设备初始化1. 硬件初始化2. 软件初始化 设备的打开与关闭1. 设备的打开2.…

微软和苏黎世联邦理工学院开源SliceGPT创新压缩技术节省大量部署资源;OpenAI成立儿童安全团队,防AI误用

&#x1f989; AI新闻 &#x1f680; 微软和苏黎世联邦理工学院开源SliceGPT创新压缩技术节省大量部署资源 摘要&#xff1a;微软和苏黎世联邦理工学院研究人员开源了SliceGPT&#xff0c;通过对大模型的权重矩阵进行压缩切片&#xff0c;实现了模型紧缩&#xff0c;节省了部…