vue3 组合式API

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中引入）

扫描二维码关注公众号，回复： 14917913 查看本文章

11.useStore (从vuex中引入)

猜你喜欢