一、 setup入口函数
1 ) 注意:setup方法中this指向undefined(原因:setup函数在创建组件之前调用)
2 ) setup参数
- props:组件接收过来的属性;
- context:上下文对象
3 ) context对象属性
- attrs:未使用props声明接收的属性
- slots:获取插槽,content.slots.default() –> 获取默认插槽
- emit:发送自定义事件
- root
- parent
- refs
二、API使用
注意:每使用一个api需要先进行引入
- 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
}
}
- reactive:将对象转换为响应式
import {reactive} from 'vue'
...
setup() {
let user = reactive({
name: '张三',
age: 18,
sex: '男'
})
return {
user
}
}
- toRefs:将reactive声明的对象解构后依然保持响应式
<template>
<!-- 直接写属性名进行取值 -->
<div>{{name}}</div>
</template>
import {reactive,toRefs} from 'vue'
...
setup() {
let user = reactive({
name: '张三',
age: 18,
sex: '男'
})
return {
...toRefs(user)
}
}
- readonly:将reactive声明的响应式对象转换为非响应式(不常用)
let newUser = readonly(user)
- isRef:判断变量是原始数据还是ref函数转换过的
import {isRef} from 'vue'
...
setup() {
let num = 66
let num2 = isRef(num) ? num.value : num
console.log(num2) // 66
}
- computed
import {computed } from 'vue'
...
setup() {
let user = {
firstName: 'Michael',
lastName: 'Jordan'
}
let fullName = computed(() => {
return user.firstName + '' + user.lastName
})
return {
fullName
}
}
- 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
}
}
- 生命周期函数
- provide、inject
- useRouter、useRoute (从vue-router中引入)
- useStore (从vuex中引入)