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

vue3.0基础

1. setup函数

vue单页面使用到的变量和方法都定义在setup函数中,return后才能被页面引用

export default {setup(){const name = '张三'const person = {name,age:30}function goWork(){consle.log('工作')}return {name,person,goWork}}
}

注意:直接定义的变量修改不会引起页面值的修改

2. ref函数

使用ref包裹的变量或者对象会变成响应式数据,ref对象值的修改会引起页面值的修改,原始值不会被修改,主要用于基础数据的引用,本质是拷贝一份数据。

<template><div @click="changeAge">{{refAge}}</div>
</template>
<script>
import {ref} from "vue"
export default {setup(){const age = 30const refAge = ref(age)function changeAge(){refAge.value = 50}return {refAge,changeAge}}
}
</script>

上面示例中调用changeAge函数后age的值不会变,refAge的值会变为50

3. toRef函数

使用toRef包裹的对象会变成响应式数据,toRef对象值的修改不会引起页面值的变化,原始值会被修改,主要用于需要修值不需要刷新页面的场景,toRef接收两个参数:第一个参数是要操作的对象,第二个参数是对象的属性名

<template><div @click="changeAge">{{person.name}}</div>
</template>
<script>
import {toRef} from "vue"
export default {setup(){const person = {name:'张三',age:30}const refNmae = toRef(person,'name')function changeAge(){refNmae.value = '李四'}return {changeAge,person}}
}
</script>
3. reactive函数

使用reactive包裹的对象会变成响应式数据,reactive对象值的修改会引起页面值的修改,返回一个响应式的Proxy,主要用于复杂数据的引用如:对象、数组

<template><div @click="changeAge">{{react.name}}</div>
</template>
<script>
import {reactive} from "vue"
export default {setup(){const person = {name:'张三',age:30}const react = reactive(person)function changeAge(){react.name = '李四'}return {changeAge,react}}
}
</script>
4. toRefs函数

使用toRefs包裹的对象会变成响应式数据,toRefs对象值的修改不会引起页面值的变化,原始值会被修改,主要用于批量设置多个数据为响应数据

<template><div @click="changeAge">{{name}}</div><div>{{attribute.weight}}</div>
</template>
<script>
import {toRefs,reactive} from "vue"
export default {setup(){const person = {name:'张三',age:30,attribute:{weight:'80',height:170}}const refs = toRefs(reactive(person))function changeAge(){refs.name = '李四'}return {changeAge,...refs}}
}
</script>

toRefs的对象配合扩展符(...)使用,toRefs传入的对象需要使用reactive包裹

5. 计算属性

vue3.x使用computed组合式API实现, setup函数中可以有多个computed。

<template><div >年龄总和:{{res}}</div><div @click='modifyAction'>修改张三年龄</div>
</template>
<script>
import {reactive,computed} from "vue"
export default {setup(){const person1 = reactive({name:'张三',age:30,attribute:{weight:'80',height:170}})const person2 = reactive({name:'李四',age:50,attribute:{weight:'70',height:160}})function modifyAction (){person1.age = 40}var res =  computed(()=>{return person1.age + person2.age})return {res,modifyAction}}
}
</script>

计算结果 = computed(返回计算结果的函数)

6. 侦听器

vue3.x使用watch组合式API实现,setup函数中可以有多个watch

<template><div @click="res++">点击数字++:{{res}}</div><div @click='modifyAction'>修改张三年龄</div>
</template>
<script>
import {ref,reactive,watch} from "vue"
export default {setup(){const res = ref(0)const person = reactive({name:'张三',age:{num:50}})// 监听对象数据的值watch(()=>person.age.num,(newVal,oldVal)=>{console.log("张三新年龄:",newVal)console.log("张三旧年龄:",oldVal)})// 监听基本数据的值watch(res,(newVal,oldVal)=>{console.log("数字新值:",newVal)console.log("数字旧值:",oldVal)})// 监听多个值  immediate:初始化时是否执行一次,默认falseconst res_a = ref(1)watch([res,res_a],(newVal,oldVal)=>{console.log("新的多个值:",newVal)console.log("旧的多个值:",oldVal)},{immediate:true})function modifyAction(){person.age.num = 20}return {res,modifyAction}}
}
</script>

watch(监听属性,(newVal,oldVal)=>{ },{immediate:是否立即执行一次})

7. 组件间传值

父组件传值使用provide,子组件收值使用inject

父组件代码:

<template><div >父组件传值</div>
</template>
<script>
import {provide} from "vue"
export default {setup(){const person = reactive({name:'张三',age:30,attribute:{weight:'80',height:170}})// 第一个参数是Key,第二个参数是值provide('name',person)}
}
</script>

子组件代码

<template><div >子组件收值</div>
</template>
<script>
import {inject} from "vue"
export default {setup(){const p1 = inject('name')console.log(p1)}
}
</script>
8. vuex的使用

vuex在vue3.x中的使用基本和vue2.x中相同

  • 创建数据仓库
import {createStore} from 'vuex'
const store = createStore({state:{// 数据名:数据值name:''},//同步调用方法mutations:{changeName(state,value){state.name = value}},// 异步调用方法,异步方法中必须调用同步方法才能修改state对象中的值actions:{modify(store,value){store.commit('changeName',value)}}
})
export default store
  • vuex挂在到app上
// 在main.js文件中引入数据仓库对象store
import App from './App.vue'
import store from './store'
// vue3.x中挂在对象使用use(对象)的方式
createApp(App).use(store).mount('#app')
  • 页面使用
<template><div>{{name}}</div>
</template>
<script>
import {useStore} from "vuex"
export default {setup(){const store = useStore()// 同步修改值store.commit('changeName','李四')// 异步修改值store.dispatch('modify','张三')// 获取值const name = store.state.nameconsole.log(name)return {name}}
}
</script>
9. 生命周期函数

onBeforeMount --- 挂载开始之前被调用

onMounted --- 组件挂载时调用

onBeforeUpdate --- 数据更新时调用

onUpdated --- 数据更改导致虚拟DOM重新渲染之后会调用该函数

onBeforeUnmont --- 卸载组件实例之前调用

onUnmounted --- 卸载组件实例之后调用

页面使用

<template>
</template>
<script>
import {onBeforeMount} from "vue"
export default {setup(){onBeforeMount(()=>{// 生命周期函数回调方法})}
}
</script>
10. 组合式API的抽离封装

上文介绍的2-6章节都是数据组合式api的内容,任何一个组合式api都可以单独抽离到另一个文件,然后在setup函数中使用。

第一步新建一个单独的js文件

// public.js文件
import {reactive,computed} from 'vue'
const public = ()=>{const res = reactive({name:'张三',age:'40'})return res
}
export default public

第二步导入js文件使用

<template><div>{{res.name}}</div>
</template>
<script>
import public from "public.js"
export default {setup(){// 使用抽离封装的数据const res = public()return {res}}
}
</script>
补充

Vue3.x比Vue2.x快,vue3.x去掉beforeCreate、create生命周期函数用setup函数代替,vue3.x代码和vue2.x代码可以在项目中同时存在。

相关文章:

vue3.0基础

1. setup函数 vue单页面使用到的变量和方法都定义在setup函数中,return后才能被页面引用 export default {setup(){const name 张三const person {name,age:30}function goWork(){consle.log(工作)}return {name,person,goWork}} } 注意&#xff1a;直接定义的变量修改不会…...

Kafka本地安装⭐️(Windows)并测试生产消息以及消费消息的可用性

2023.12.17 天气晴 温度较低 十点半&#xff0c;不是不想起实在是阳光浴太nice了日常三连&#xff0c;喂&#xff0c;刷&#xff0c;肝刷会儿博客&#xff0c;看会儿设计模式冷冷冷 进被窝 刷视频 睡觉看看kafka的本地部署 》》实践》》成功写会儿博客&#xff0c…...

生产环境_Spark解析JSON字符串并插入到MySQL数据库

业务背景&#xff1a; 最近开发有一个需求&#xff0c;是这样的 我需要将一段从前端传过来的JSON字符串进行解析&#xff0c;并从中提取出所需的数据&#xff0c;然后将这些数据插入到MySQL数据库中。 json格式样例如下 { \"区域编号\": \"001\", …...

WEB渗透—PHP反序列化(四)

Web渗透—PHP反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩…...

LVS-DR模式部署

实验准备&#xff1a; 节点服务器 192.168.116.20 #web1 192.168.116.30 #web2 1.部署NFS共享存储 2.部署Web节点服务器 将两台服务器的网关注释掉 #重启网卡 systemctl restart network 修改节点服务器的内核参数|vim /etc/sysctl.conf net.ipv4.conf.lo.arp_ign…...

Oracle的学习心得和知识总结(三十)| OLTP 应用程序的合成工作负载生成器Lauca论文翻译及学习

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《Oracle Database SQL Language Reference》 2、参考书籍&#xff1a;《PostgreSQL中文手册》 3、EDB Postgres Advanced Server User Gui…...

HarmonyOS4.0从零开始的开发教程18后台代理提醒

HarmonyOS&#xff08;十六&#xff09;后台代理提醒 简介 随着生活节奏的加快&#xff0c;我们有时会忘记一些重要的事情或日子&#xff0c;所以提醒功能必不可少。应用可能需要在指定的时刻&#xff0c;向用户发送一些业务提醒通知。例如购物类应用&#xff0c;希望在指定时…...

智能优化算法应用:基于算术优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于算术优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于算术优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.算术优化算法4.实验参数设定5.算法结果6.…...

在vue中通过js动态绘制table,并且合并连续相同内容的行,支持点击编辑单元格内容

首先是vue代码 <template><div id"body-container"style"position: absolute"><div class"box-container"><div class"lsb-table-box" ><div class"table-container" id"lsb-table"&…...

输电线路定位:精确导航,确保电力传输安全

在现代社会中&#xff0c;电力作为生活的基石&#xff0c;其安全稳定运行至关重要。而输电线路作为电力传输的重要通道&#xff0c;其故障定位和修复显得尤为重要。恒峰智慧科技将为您介绍一种采用分布式行波测量技术的输电线路定位方法&#xff0c;以提高故障定位精度&#xf…...

ZKP Commitment (1)

MIT IAP 2023 Modern Zero Knowledge Cryptography课程笔记 Lecture 5: Commitment 1 (Ying Tong Lai) Overview: Modern SNARK IOP: Interactive Oracle ProofCommitment SchemeIOP “compiled by” the commitment scheme to get a non-interactive proofAn IOP is “inform…...

【难点】【LRU】146.LRU缓存

题目 法1&#xff1a;基于Java的LinkedHashMap 必须掌握法1。参考链接 关于LinkedHashMap的介绍 class LRUCache {int cap;LinkedHashMap<Integer, Integer> cache new LinkedHashMap<>();public LRUCache(int capacity) { this.cap capacity;}public int get…...

基于YOLOv8深度学习的吸烟/抽烟行为检测系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…...

菜鸟学习日记(python)——匿名函数

Python 使用 lambda 来创建匿名函数。 lambda 函数是一种小型、匿名的内联函数&#xff0c;它可以具有任意数量的参数&#xff0c;但只能有一个表达式。 匿名函数的一般格式如下&#xff1a; lambda 参数列表:表达式 表达式用于计算并返回函数结果 lambda 函数通常用于编写…...

CompleteFuture与Future的比较

CompleteFuture的介绍CompleteFuture的特点CompleteFuture的应用场景CompletableFuture的优缺点Future的介绍Future的特点Future的应用场景Future的优缺点CompletableFuture和Future的区别CompletableFuture和Future的关联关系CompletableFuture和Future的使用示例CompletableF…...

数据分享 I 全国市级商品房屋销售数据,shp/excel格式,2005-2020年数据

基本信息. 数据名称: 全国市级商品房屋销售数据 数据格式: Shp、excel 数据时间: 2005-2020年 数据几何类型: 面 数据坐标系: WGS84坐标系 数据来源&#xff1a;网络公开数据 数据字段&#xff1a; 序号字段名称字段说明1spxse商品房销售额&#xff08;亿元&#xf…...

面试题总结(十一)【C++】【华清远见西安中心】

C和C的区别有哪些&#xff1f; C 和 C 是两种不同的编程语言&#xff0c;它们有以下一些区别&#xff1a; 1. 语言起源和发展&#xff1a;C 语言是由贝尔实验室的 Dennis Ritchie 在 1972 年开发的&#xff0c;主要用于系统编程和底层开发&#xff1b;而 C 语言是在 C 语言的基…...

c++_01_名字空间_复合类型_缺省参数_哑元函数

0 前言 C和C一样&#xff0c;都属于编译型语言 C和C一样&#xff0c;都属于强类型语言 C对C完全兼容&#xff0c;并提供更多面向对象的特性&#xff1a;语言风格更加简洁&#xff0c;类型检查更加严格 1 名字空间 namespace WHY&#xff1f;划分更精细的逻辑单元(逻辑空间)&…...

前端常见面试题之html和css篇

文章目录 一、html1. 如何理解html语义化2. 说说块级元素和内联元素的区别 二、css1. 盒模型的宽度offsetWidth如何计算2. box-sizing:border-box有什么用3. margin的纵向重叠问题4. 谈谈你对BFC的理解和应用5. 清除浮动有哪些方式6. 使用flex布局实现骰子37.position的absolut…...

使用libaom处理av1编码教程

使用libaom处理av1编码教程 文章目录 使用libaom处理av1编码教程一. av1 是什么二. av1 用处三. libaom 是什么四. libaom 安装五. libaom 安装完成六. 解码av1 一. av1 是什么 AV1&#xff08;AOMedia Video 1&#xff09;是一种 开源视频编码格式 。它由开放媒体联盟 (AOM) …...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...