vue3组合式API基本使用

一、 setup入口函数

1 ) 注意：setup方法中this指向undefined（原因：setup函数在创建组件之前调用)

2 ) setup参数

• props：组件接收过来的属性；
• context：上下文对象

3 ) context对象属性

• attrs：未使用props声明接收的属性
• slots：获取插槽，content.slots.default() –> 获取默认插槽
• emit：发送自定义事件
• root
• parent
• refs

二、API使用

注意：每使用一个api需要先进行引入

1. ref：将基础数据类型转换为响应式

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