vue3 组合式API
2023-09-11 14:16:33 时间
1.ref:将基础数据类型转换为响应式
( js的基本数据类型有:1、Number类型;2、String类型;3、Boolean类型;4、Null类型;5、Undefined类型;6、Biglnt类型;7、字符串类型;8、符号类型。)
<template>
<!-- 在模板中取值 -->
<div>{{foo}}</div>
<!-- 在模板中调用方法并传值-->
<div>{{fun(88)}}</div>
</template>
import {ref} from 'vue'
...
setup() {
let foo = ref(1)
let fun = (newVal) => {
// 在方法中取值
console.log(foo.value) // 1
// 修改变量foo的值
foo.value = newVal
console.log(foo.value) // 88
}
return {
foo,
fun
}
}
2.reactive:将对象转换为响应式
import {reactive} from 'vue'
...
setup() {
let user = reactive({
name: '张三',
age: 18,
sex: '男'
})
return {
user
}
}
3.toRefs:将reactive声明的对象解构后依然保持响应式
<template>
<!-- 直接写属性名进行取值 -->
<div>{{name}}</div>
</template>
import {reactive,toRefs} from 'vue'
...
setup() {
let user = reactive({
name: '张三',
age: 18,
sex: '男'
})
return {
...toRefs(user)
}
}
4. readonly:将reactive声明的响应式对象转换为非响应式(不常用)
let newUser = readonly(user)
5.isRef:判断变量是原始数据还是ref函数转换过的
import {isRef} from 'vue'
...
setup() {
let num = 66
let num2 = isRef(num) ? num.value : num
console.log(num2) // 66
}
6. computed
import {computed } from 'vue'
...
setup() {
let user = {
firstName: 'Michael',
lastName: 'Jordan'
}
let fullName = computed(() => {
return user.firstName + '' + user.lastName
})
return {
fullName
}
}
7. watch
import { ref, watch } from 'vue'
...
setup() {
let a = ref(1)
let b = ref(2)
// 监听单个值
watch(a, (newVal,oldVal) => {
cosole.log(a.value) // 1
},{immediate:true}) //immediate:true 确认是否以当前的初始值执行handler函数
// 监听多个值
watch([a,b], ([newA,newB],[oldA,oldB]) => {
cosole.log(newA + '-' + oldA) // 1-undefined
},{immediate:true})
return {
a,
b
}
}
8.生命周期函数
9.provide、inject
10.useRouter、useRoute (从vue-router中引入)
11.useStore (从vuex中引入)
相关文章
- c# asp.net mvc API接口安全过滤,api域名过滤,api域名+端口过滤,权限,鉴权
- 【Vue3】Vue3中reactive变量重新赋值无法响应的三种处理方法(已解决)
- 【Vue3】自定义ref(customRef)的用法和示例(转)
- vite+vue3使用tailwindcss
- Vue3新特性体验--中(Composition API)
- 助你从Vue2过渡到Vue3的常见使用场景之二
- 何为 Vue3 组件标注 TS 类型,看这篇文章就够了!
- Vue3 Composition API: 对比ref和reactive
- Vue3+elementplus搭建通用管理系统实例六:后台主页搭建下
- vue3播放m3u8视频(videoJS)
- vue3条件渲染v-if与列表渲染v-for 与微信小程序对比
- Vue3之新的api
- Vue3之Fragment
- vite+vue3+ts项目之新建项目
- 浅析Vue3中vuex的基本使用、模块化及如何使用mapState/mapGetters和mapActions
- Vue3结合TS项目开发实践:Composition API的风格理念、关注点分离、如何组织TS进行项目开发(采用声明文件来管理接口及所需类型/目录结构推荐)
- 浅析vue2中 Options API 和vue3中 Composition API 的对比
- 浅析Vue3新特性-Teleport(任意传送门也称瞬间移动):为什么需要Teleport、与React的Portals特性、如何使用(直接使用、与组件搭配使用、使用多个teleport)、teleport API(to及disabled使用介绍)
- vue3中ref和reactive的区别(系列六)
- vue3组合API(setup函数,系列二)
- 14.0 vue3 customRef的使用
- 3.0 vue3有关组件传值