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://xiahunao.cn/news/2780566.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

车载软件架构 —— Adaptive AUTOSAR是软件架构的正解吗？

车载软件架构 —— Adaptive AUTOSAR是软件架构的正解吗？

车载软件架构 —— Adaptive AUTOSAR是软件架构的正解吗&#xff1f; 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师&#xff08;Wechat&#xff1a;gongkenan2013&#xff09;。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文…
阅读更多...
【JVM篇】分析并讲解字节码文件

【JVM篇】分析并讲解字节码文件

文章目录 &#x1f354;字节码文件⭐打开字节码文件的工具⭐字节码文件的组成✨具体分析 &#x1f354;字节码文件 字节码文件是一种中间表示形式&#xff0c;它通常由编译器将高级编程语言&#xff08;如Java、Python等&#xff09;源代码编译而成。字节码文件包含了程序的指…
阅读更多...
分享88个文字特效，总有一款适合您

分享88个文字特效，总有一款适合您

分享88个文字特效&#xff0c;总有一款适合您 88个文字特效下载链接&#xff1a;https://pan.baidu.com/s/1Y0JCf4vLyxIJR6lfT9VHvg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不…
阅读更多...
Java串口通信技术探究1：深入理解RXTX库

Java串口通信技术探究1：深入理解RXTX库

目录 一、RXTX库简介二、RXTX库工作原理三、RXTX库的应用场景四、RXTX库的兼容性五、RXTX库下载及安装 在现代嵌入式系统中&#xff0c;串口通信是一种非常常见的通信方式。通过串口&#xff0c;设备之间可以传输各种类型和格式的信息。Java作为一种流行的编程语言&#xff0c;…
阅读更多...
C++多线程学习[五]：RAII锁

C++多线程学习[五]：RAII锁

一、什么是RAII 使用局部对象来控制资源的技术&#xff0c;即它的生命周期由操作系统来管理&#xff0c;无需人工的介入。 为什么要采用RAII技术呢&#xff1f; 主要是在开发过程中资源的销毁容易忘记&#xff0c;容易造成死锁或内存泄露。 {}为一个区域 &#xff0c;这里锁的…
阅读更多...
java nio零拷贝

java nio零拷贝

零拷贝是一种计算机执行IO操作的优化技术&#xff0c;其核心目标是减少数据拷贝次数&#xff0c;从而提高系统性能。它主要体现在以下几个方面&#xff1a; 1. **定义与原理**&#xff1a;零拷贝字面上的意思包括“零”和“拷贝”。其中&#xff0c;“拷贝”是指数据从一个存储…
阅读更多...
单片机与外设的交互

单片机与外设的交互

单片机与外设的交互是嵌入式系统中非常重要的一个基础知识点。单片机是一个集成在同一芯片上的中央处理器、存储器和输入/输出接口,它可以根据用户编写的程序与各种外部设备即外设进行交互。单片机与外设之间的交互主要通过单片机上的输入/输出口(I/O口)来实现。 I/O口的工作原…
阅读更多...
Python访问数据库

Python访问数据库

目录 SQLite数据库 SQLite数据类型 Python数据类型与SQLite数据类型的映射 使用GUI管理工具管理SQLite数据库 数据库编程的基本操作过程 sqlite3模块API 数据库连接对象Connection 游标对象Cursor 数据库的CRUD操作示例 示例中的数据表 无条件查询 有条件查询 插入…
阅读更多...
快速学习Spring

快速学习Spring

Spring 简介 Spring 是一个开源的轻量级、非侵入式的 JavaEE 框架&#xff0c;它为企业级 Java 应用提供了全面的基础设施支持。Spring 的设计目标是简化企业应用的开发&#xff0c;并解决 Java 开发中常见的复杂性和低效率问题。 Spring常用依赖 <dependencies><!-…
阅读更多...
【C语言】C的整理记录

【C语言】C的整理记录

前言 该笔记是建立在已经系统学习过C语言的基础上&#xff0c;笔者对C语言的知识和注意事项进行整理记录&#xff0c;便于后期查阅&#xff0c;反复琢磨。C语言是一种面向过程的编程语言。 原想在此阐述一下C语言的作用&#xff0c;然而发觉这些是编程语言所共通的作用&#…
阅读更多...
使用securecrt+xming通过x11访问ubuntu可视化程序

使用securecrt+xming通过x11访问ubuntu可视化程序

windows使用securecrtxming通过x11访问ubuntu可视化程序 windows机器IP&#xff1a;192.168.9.133 ubuntu-desktop20.04机器IP&#xff1a;192.168.9.190 windows下载xming并安装 按照图修改xming配置 开始->xming->Xlaunch 完成xming会在右下角后台运行 windows在…
阅读更多...
LeetCode Python -8.字符串转整数

LeetCode Python -8.字符串转整数

文章目录 题目答案运行结果 题目 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入字符串并丢弃无用的前导空格检查下一个…
阅读更多...
Makefile编译原理 打造专业的编译环境

Makefile编译原理 打造专业的编译环境

一.打造专业的编译环境
阅读更多...
大数据Doris（六十五）：基于Apache Doris的数据中台2.0

大数据Doris（六十五）：基于Apache Doris的数据中台2.0

文章目录 基于Apache Doris的数据中台2.0 一、​​​​​​​架构升级
阅读更多...
分享76个时间日期JS特效，总有一款适合您

分享76个时间日期JS特效，总有一款适合您

分享76个时间日期JS特效&#xff0c;总有一款适合您 76个时间日期JS特效下载链接&#xff1a;https://pan.baidu.com/s/1s7tPGT_ItK7dNK5_qbZkug?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;…
阅读更多...
C语言 服务器编程-日志系统

C语言 服务器编程-日志系统

日志系统的实现 引言最简单的日志类 demo按天日志分类和超行日志分类日志信息分级同步和异步两种写入方式 引言 日志系统是通过文件来记录项目的 调试信息&#xff0c;运行状态&#xff0c;访问记录&#xff0c;产生的警告和错误的一个系统&#xff0c;是项目中非常重要的一部…
阅读更多...
《Linux 简易速速上手小册》第7章: 网络配置与管理（2024 最新版）

《Linux 简易速速上手小册》第7章: 网络配置与管理（2024 最新版）

文章目录 7.1 Linux 网络基础7.1.1 重点基础知识7.1.2 重点案例&#xff1a;配置静态 IP 地址7.1.3 拓展案例 1&#xff1a;使用 nmcli 配置网络&#xff08;适用于 Fedora/CentOS&#xff09;7.1.4 拓展案例 2&#xff1a;配置无线网络连接 7.2 静态与动态 IP 配置7.2.1 重点基…
阅读更多...
关于物理机ping不通虚拟机问题

关于物理机ping不通虚拟机问题

方法一 设置虚拟机处于桥接状态即可&#xff1a;&#xff08;虚拟机->设置->网络适配器&#xff09;&#xff0c;选择完确定&#xff0c;重启虚拟机即可。 方法二 如果以上配置还是无法ping通&#xff1a;&#xff08;编辑->虚拟网络编辑器&#xff09; 首先查看主机网…
阅读更多...
基于大语言模型的AI Agents

基于大语言模型的AI Agents

代理&#xff08;Agent&#xff09;指能自主感知环境并采取行动实现目标的智能体。基于大语言模型&#xff08;LLM&#xff09;的 AI Agent 利用 LLM 进行记忆检索、决策推理和行动顺序选择等&#xff0c;把Agent的智能程度提升到了新的高度。LLM驱动的Agent具体是怎么做的呢&a…
阅读更多...
构建中国人自己的私人GPT—支持中文

构建中国人自己的私人GPT—支持中文

上一篇已经讲解了如何构建自己的私人GPT&#xff0c;这一篇主要讲如何让GPT支持中文。 privateGPT 本地部署目前只支持基于llama.cpp 的 gguf格式模型&#xff0c;GGUF 是 llama.cpp 团队于 2023 年 8 月 21 日推出的一种新格式。它是 GGML 的替代品&#xff0c;llama.cpp 不再…
阅读更多...
最新文章

Copyright @ 2022~2023