vue3.0组合式api语法使用总结
2024-06-21 04:58:11
目录
1.setup使用
2.生命周期函数
Vue应用程序中有4个主要事件
3.vuex
4.toRef介绍
5.ref介绍
6.组件传值
7.shallowRef和shallowReactive
8.watchEffect
9.watch侦听器
10.computed
11.reactive介绍
12.toRefs介绍
13.Fragment
14.Teleport
15.Suspense
vue2开发缺点和vue3开发优点
- vue2代码冗余，杂乱
- vue3则可以把相关的功能代码抽离分割在一起，方便开发者快速阅读
1.setup使用
- setup函数是 Composition API（组合API）的入口
- setup是启动页面后会自动执行的一个函数
- 项目中定义的所有变量，方法等都需要在setup中
- 在setup函数中定义的变量和方法最后都需要 return 出去， 否则无法在视图层中使用
setup(){console.log('自动执行')const name = '林一'const age = 20const company = '阿里巴巴'const btn = ()=>{const res = `我叫${name},今年${age}岁了,在${company}上班`console.log(res)}// 计算属性// 侦听器return {name,btn}}2.生命周期函数
- onBeforeMount —— 在挂载开始之前被调用
- onMounted —— 组件挂载时调用
- onBeforeUpdate —— 数据更新时调用
- onUpdated —— 数据更改导致的虚拟 DOM 重新渲染，在这之后会调用该钩子
- onBeforeUnmount —— 在卸载组件实例之前调用
- onErrorCaptured —— 当捕获一个来自子孙组件的错误时被调用
Vue应用程序中有4个主要事件
- 创建 — 在组件创建时执行
- 挂载 — DOM 被挂载时执行
- 更新 — 当响应数据被修改时执行
- 销毁 — 在元素被销毁之前立即运行
import { onBeforeMount, ....... } from 'vue'3.vuex
- 同vue2一致
- 需要安装，引入
//安装
npm install vuex@next --save
//引入
import {useStore} from 'vuex'4.toRef介绍
- toRef也可以创建一个响应式数据
- ref本质是拷贝粘贴一份数据，脱离了与原数据的交互
- ref函数将对象中的属性变成响应式数据，修改响应式数据是不会影响到原数据,但是会更新视图层
- toRef的本质是引用，与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层
- 使用需引入
import {toRef} from 'vue'
//toRef接收两个参数，第一个参数是要操作的对象，第二个参数是对象的某个属性
const obj = {name:'林一'}
toRef(obj,'name')setup(){const obj = {name:'林一',age:40}// const res = ref(obj.name)const res = toRef(obj,'name')const btn = ()=>{res.value = '林二'console.log(res)console.log(obj)}return {res,btn}}5.ref介绍
- ref 为我们的值创建了一个响应式引用
- 使用需引用
import {ref} from 'vue'//组合式api
ref('林一')- 当ref里的值发生改变时，视图层会自动更新
- ref可操作基本数据类型，也可以操作复杂数据类型：对象，数组
- 建议：ref用来操作基本数据类型：数字，字符串
setup(){const name = ref('林一')const age = ref(52)const company = ref('阿里巴巴')// 对象类型const obj = ref({taobao:'淘宝',tamll:'天猫'})// 数组类型const arr = ref([{xiami:'林二',huabei:'京东'}])const btn = ()=>{// 响应对象类型// name.value = '林三'// obj.value.taobao = '淘宝000'// console.log(obj)// 响应数组类型arr.value[0].xiami = '京东000'console.log(arr)}return {name,age,company,btn,obj,arr}}6.组件传值
//第一种：进入页面即刻传值（祖孙传值）
const p1 = reactive({name:'林一',age:52})
provide('p',p1)//祖传const res = inject('p')//孙收//第二种：点击传值
<Vue ref="val"/>//引入子组件，使用ref调用该子组件
const val = ref()
const p1 = reactive({name:'林一',age:52})
function btn(){val.value.receive(p1)
}7.shallowRef和shallowReactive
- shallowRef只处理基本类型数据
- shallowReactive只处理第一层数据
- 使用需引入
import { shallowReactive,shallowRef } from 'vue'setup() {//shallowReactive:只处理第一层的数据const p1 = shallowReactive({name:'林一',product:{taobao:5}})// shallowRef:只处理基本类型数据const p2 = shallowRef({val:1})console.log(p2)return{...toRefs(p1),p2}},8.watchEffect
- watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖
- watch 可以获取到新值与旧值（更新前的值），而 watchEffect是拿不到的
- watchEffect不需要指定监听的属性，他会自动的收集依赖， 只要我们回调中引用到了 响应式的属性， 那么当这些属性变更的时候，这个回调都会执行，而 watchEffect 只能监听指定的属性而做出变更
- 使用需引入
import { watchEffect } from 'vue'setup() {const p1 = ref(0)const p2 = ref(1)const p3 = reactive({name:'林一',age:50,product:{wx:14}})const S = watchEffect(()=>{const a = p1.valueconst b = p2.valueconsole.log('进入页面我就执行')})S()//停止监听return {p1,p2,p3}},9.watch侦听器
- 与vue2一致，均是用来侦听数据变化的，没有缓存，可监听data中数据，支持异步
- 使用需引入
mport { watch } from 'vue'setup() {const p1 = ref(0)const p2 = ref(1)const p3 = reactive({name:'林一',age:50,product:{wx:14}})// 一：侦听ref的基本数据// watch(p1,(newVal,oldVal)=>{// console.log(newVal,oldVal)// },{immediate:true})//{immediate:true}立即侦听// 二：侦听多个ref响应数据// watch([p1,p2],(newVal,oldVal)=>{// console.log(newVal,oldVal)// })// 三：侦听整个reactive定义的数据:只能监听到最新的结果，之前的结果监听不到// watch(p3,(newVal,oldVal)=>{// console.log(newVal,oldVal)// })// 四：侦听reactive定义的数据中的某一个值:可以监听到,无论层级有多深watch(()=>p3.product.wx,(newVal,oldVal)=>{console.log(newVal,oldVal)})return {p1,p2,p3}},10.computed
- 与vue2一致，均是用来监听数据变化
- 是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新
- 不能再data中出现同样的名字
- 使用需引入
import { computed } from 'vue'setup() {const mayun = ''const huateng = ''const res = reactive({linyi,liner})// 计算年龄总和const sum = computed({get(){return res.linyi + res.liner},set(val){console.log(val)}})return {...toRefs(res),sum}
}11.reactive介绍
- reactive同样为我们的值创建了一个响应式引用
- 定义基本普通类型数据不能用reactive，用ref
- reactive主要定义复杂数据类型，比如数组，对象
- reactive可响应深层次的数据，比如多维数组
- reactive返回一个响应式的proxy对象
- 使用需引入
import { reactive } from 'vue'
reactive({name:'林一'})setup(){// const name = reactive({name:'林一'})// const age = reactive({age:20})// const company = reactive({company:'阿里巴巴'})// // 深层次响应式// const pro = reactive({// a:'淘宝',// b:'天猫',// c:{// d:'京东',// e:'顺丰'// }// })const btn = ()=>{// name.name = '林二'// age.age = 40// pro.c.d = '京东0000'res.name = '林三'}// 共用一个reactiveconst name = '林四'const age = 52const company = '阿里巴巴'const res = reactive({name,age,company})return {res,btn}}12.toRefs介绍
- 用于批量设置多个数据为响应式数据
- toRefs与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层
- toRefs还可以与其他响应式函数交互，更加方便处理视图层数据
- 使用需引入
import {toRefs} from 'vue'
toRefs(obj)setup(){const obj = {name:'林一',age:40}const refs = reactive(obj)// const res = toRefs(refs)const btn = ()=>{// res.name.value = '林三'// console.log(res)console.log(refs)refs.name = '林二'console.log(refs)console.log(obj)}return {...toRefs(refs),btn}}13.Fragment
- 在Vue2中: 组件必须有一个根标签
- 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
- 好处: 减少标签层级, 减小内存占用
14.Teleport
`Teleport` 是一种能够将我们的<strong style="color:#DD5145">组件html结构</strong>移动到指定位置的技术。
<teleport to="移动位置"><div v-if="isShow" class="mask"><div class="dialog"><h3>我是一个弹窗</h3><button @click="isShow = false">关闭弹窗</button></div></div></teleport>15.Suspense
- 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
- 使用步骤：
- 异步引入组件
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))使用```Suspense```包裹组件，并配置好```default``` 与 ```fallback```
<template><div class="app"><h3>我是App组件</h3><Suspense><template v-slot:default><Child/></template><template v-slot:fallback><h3>加载中.....</h3></template></Suspense></div>
</template>⭐️⭐️⭐️ 作者：船长在船上
vue3.0组合式api语法使用总结相关推荐
- Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
- vue3.0 组合式API 加加减减
通过cdn安装vue setup() createApp() ref <!DOCTYPE html> <html lang="en"> <head&g ...
- vue3.0 Composition API 上手初体验 使用 vue-router 构建多页面应用
vue3.0 Composition API 上手初体验 使用 vue-router 构建多页面应用 前两讲,我们已经顺利的使用 vue3.0 将项目跑起来了.但是实在是过于简陋,目前我们几乎不可能开 ...
- Vue3为什么要使用组合式API——Vue3的组合式API和Vue2的选项式API的优缺点
Vue3为什么要使用组合式API--Vue3的组合式API和Vue2的选项式API的优缺点 1.Vue2为什么使用选项式API 2.Vue2如何使用组合式API 3.组合式API Vs 选项式API ...
- Vue3基础-组合式 API 基础之setup
背景 Vue3 提供了组合式 API,这个功能对代码维护提供了很大帮助. 我们可以看下Vue2之前的代码结构,借用官方文档的图,说明如下: 再来看下使用组合式API 后的代码结构,借用网上的图例,说明 ...
- 【Vue3】vue3中组合式Api的setup写法快速入门上手起步
要使用Vue3,那必须得会setup,因为setup是组合式API表演的舞台. 安装volar 如果你的VScode之前安装有vuter插件,请先把他禁用或者卸载掉,然后安装volar. 因为,vut ...
- Vue3.0 Composition API与Vue2.x 使用的 Options API
Vue3.0 所采用的 Composition API 与 Vue2.x 使用的 Options API 有什么不同 开始之前 Composition API 可以说是Vue3最大的特点,那么为什么要 ...
- 探秘 Vue3.0 - Composition API 在真实业务中的尝鲜姿势
前言 2019年2月6号,React 发布 16.8.0 版本,新增 Hooks 特性.随即,Vue 在 2019 的各大 JSConf 中也宣告了 Vue3.0 最重要的 RFC,即 Functio ...
- vue3.0 - Composition API
一. 介绍 >使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高,代码量会不断的加大:由于相关业务的代码需要遵循option的配置写到特定的区域,导致后续维护非常的复杂,同时 ...
- vue3基础-组合式API之computed
computed 与Vue2.x中computed配置功能一致 如使用script-setup可不用return,直接在template中使用即可 // 引入 computed import { co ...
最新文章
- DRBD数据同步部署-centos7
- [物理学与PDEs]第3章第2节 磁流体力学方程组 2.4 不可压情形的磁流体力学方程组...
- 部分网站公开数据的汇总（2）
- hdu3549(网络流入门题-最大流的Ford-Fulkerson算法)
- Lingo优化模型概述
- jmeter 响应结果分析一
- C#设计模式之23-访问者模式
- P60 ---AI 在P60 上的人应用
- k8s中hostname, hosts文件, DNS和代理问题, service和pod的访问问题
- quartz入门案例
- 重载前自增运算符和后自增运算符
- 二调,分幅图打印（标准分幅土地利用现状图,耕地坡度分级图）,图框工具
- c#制作仿win7屏幕键盘之笔记
- python pyqt5 股票分时_Python使用PyQtGraph绘制股票行情K线图
- JavaScript 编程精解 中文第三版 五、高阶函数
- java会签_工作流引擎会签，加签，主持人，组长模式 专题讲解
- 支付宝个人支付接口（蚂蚁金服官方接口）
- 基于testNG的数据驱动测试的自动化测试实践（一）
- MySQL数据库实验（四）：E-R图实例讲解
- 华为设置android系统提醒功能,华为手机短信不提醒怎么办？华为手机短信提醒设置方法...
热门文章