**介绍:**函数是所有Composition Api表演的舞台,组件中的数据、方法等均要配置在setup中
setup函数的两种返回值:
注意事项:
**作用:**实现响应式数据
语法:const xxx = ref(initValue)
xxx.value
备注:
Object.defineProperty()
的get与set完成的**作用:**定义一个引用类型的响应式数据(基本类型用ref,基本类型无法用reactive)
语法:const 代理对象 = reactive(源对象)
,接收引用类型数据(数组或者对象),返回一个proxy代理对象
**特点:**深层次的处理了对象,不管对象有多深多做了响应式
为什么用reactive而不用ref的原因:
- reactive可以在js进行操作修改数据时操作更简单
Object.defineProperty
来实现数据劫持proxy和reflect
来实现数据劫持this.$attrs
this.$slots
,并且在使用具名插槽时使用v-slot:name
指令this.$emit
,同时需要用emits
进行注册,如果没有注册将会报提示仍可以使用vue2中的computed属性、watch属性
1、computed函数
setup(){
// 简写
let fullname = computed(()=>{
return person.firstName + '-' + person.lastName
})
// 完整
let fullname = computed({
get(){
return person.firstName + '-' + person.lastName
},
set(value){
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
}
2、watch函数
监听对象:引用对象(ref)、响应式对象(reactive object)、数组(array)
语法:watch(targets,callback,config)
<template>
<button @click="person.name+= '1'">改名字</button>
<button @click="person.job.salary+= 1">加薪水</button>
</template>
let msg = '你好'
let sum = ref(0)
let person = reactive({
name:'张三',
age:18,
job:{
salary:20
}
})
// 情况一:监视ref所定义的一个响应式数据
watch(sum,(newVal,oldVal)=>{
console.log('sum变化了',newVal,oldVal)
})
// 情况二:监视ref所定义的多个响应式数据
watch([sum,msg],(newVal,oldVal)=>{
console.log('sum、msg变化了',newVal,oldVal)
},{immediate:true})
/*
情况三:监视reactive所定义的一个响应式数据的全部属性
1、此处无法获取正确的oldValue
2、deep配置无效
*/
watch(person,(newVal,oldVal)=>{
console.log('person变化了',newVal,oldVal)
},{ deep:false })
// 情况四:监视reactive所定义的一个响应式数据的某个属性
watch(()=>person.name,(newVal,oldVal)=>{
console.log('person.name变化了',newVal,oldVal)
})
// 情况五:监视reactive所定义的一个响应式数据的某些属性
watch([()=>person.name,()=>person.age],(newVal,oldVal)=>{
console.log('person.name\person.age变化了',newVal,oldVal)
})
// 特殊情况,如果不加deep配置属性将无法监听,此时deep属性有效
watch(()=>person.job,(newVal,oldVal)=>{
console.log('person.job变化了',newVal,oldVal)
},{deep:true})
// 使用下面这个可以达到上面效果,此时跟情况三一样也是无效
watch(person.job,(newVal,oldVal)=>{
console.log('person.job变化了',newVal,oldVal)
})
注意事项:
3、watchEffect函数
watch与watchEffect的区别:
watchEffect(()=>{
const x1 = msg
console.log('watchEffect执行了')
})
介绍:本质是一个函数,用于将setup函数中使用的组合式Api进行封装(类似于vue2中的mixins)
优势:复用代码
作用:创建一个ref对象,其value值指向另一个对象中的某个属性
语法:const name = toRef(person,'name')
应用:将响应式对象中的某个属性单独提供给外部使用
扩展:toRefs
与toRef
功能一致,但可以批量创建多个ref对象,语法:toRefs(person)
setup(){
let person = reactive({
name:'张三',
age:18,
job:{
salary:20
}
})
return {
name:toRef(person,'name'),
salary:toRef(person.job,'salary')
...toRefs(person )
// 这种是不行的,因为他就是一个基本数据类型,检测不到,这种无法实现响应式
name:person.name
// ref(person.anme)也不行,这种实现响应式,但是修改的并不是原本的person.name
}
}