1. 简述
Composition API：组合式 API；一组低侵入式的、函数式的 API，使得我们能够更灵活地【组合】组件的逻辑。
Composition API提供了一个setup函数，我们可以将data数据、计算属性、方法等等，都放在setup函数中，这样就可以对业务进行集中处理了。
2. 常用组合api
2.1. setup
- setup函数是Composition API 的入口点，是它的核心。
- 由于执行 setup 时，组件实例尚未被创建，因此在 setup 中不能使用 this。
- setup中定义的东西必须要return出去，才能被使用或绑定视图。
使用方式1
vue版本3.2以后可以在<script>标签中，没有export default
- setup如何使用组件name属性下面使用方式2是其中一种 还有一种是引入defineComponent设置，需要写两个script标签。其他写法是配合ts使用。
<template>
<div>
组合api{{title}}
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name:'demoVue'
})
</script>
<script setup>
import {ref} from 'vue'
const title = ref('这是组合api例子');
</script>
<style>
</style>
使用方式2
使用setup函数
<template>
<div>
组合api{{title}}
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name:'demoVue',
setup(){
const title = ref('这是组合api例子')
return{
title
}
}
}
</script>
<style>
</style>
2.1. ref函数
推荐定义基本类型，ref声明的类型，通过value获取值
方法：引入 ref 函数，const xxx = ref(initValue) 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
- const msg_ = ref() msg_ 是underfind
<script setup >
import {ref} from 'vue'
const msg = ref("初始化")
const msg_ = ref()
msg.value = '初始化后赋值'
console.log('msg--------',msg.value,msg_.value)
// 声明对象、数组、map
const json = ref({})
const array = ref([])
const map = ref(new Map())
</script>
toRefs 是对数据的解构
- import {name} = recitive({name:'zhangsan'})name不可以直接赋值，需要赋值则 let name = toRefs(name) 则name.value = zhangz 即可还是数据绑定
<script setup >
const obj = reactive({
name:'張三',
age:18
})
const {name,age} = toRefs(obj)
const btn = ()=>{
name.value= '李四'
}
</script>
2.2.reactive 函数
对象类型的响应式数据（基本类型不要用它，要用ref函数） 方法：const x= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy 的实例对象，简称 proxy 对象） 特点：可以实现数组、深层对象的响应式数据，这是 vue2.0 中无法实现的，底层基于 Proxy
- 注意若声明数组 const arr = reactive([1,2,3]) arr = [] 会断了响应，应arr.length = 0
<script setup >
import {reactive} from 'vue'
const obj1 = reactive({
name:'zyj',
age:18
})
obj1.age = 19
obj1.sex = '男'
console.log('--obj1---',obj1.name);
</script>
2.3.computed函数
计算属性函数，与Vue2.x中computed配置功能一致
<script setup >
import {reactive,computed} from 'vue'
const obj1 = reactive({
name:'zyj',
age:18
})
obj1.age = 19
obj1.sex = '男'
const age = computed(()=>{
return obj1.age + 1
})
console.log('--obj1---',obj1.name);
</script>
2.4.watch函数
- immediate：如果要加载时执行一次，需要加第三个配置对象，immediate:true
- deep：如果监视的对象属性也是一个对象，需要手动开启
- watchEffect：不需要明确的去监视谁，谁在回调函数里面用到了，就监视谁。注意：该回调函数一开始会执行一次
import {watch} from 'vue'
2.4.1.watch函数 监听单个ref
- 一秒后修改值，输入watch监听日志
日志 ---watch--- 222 111
<script setup >
import {ref,watch} from 'vue'
const age = ref(111)
watch(age,(newValue,oldValue)=>{
console.log('---watch---',newValue,oldValue);
})
let timer = setTimeout(()=>{
age.value = 222
},1000)
</script>
2.4.2.watch函数 监听多个ref
- 一秒后修改值，输入watch监听日志
日志 ---watch--- [1111, 3333] ， [111, 333]
按数组返回对应监听值的多个ref数组，一个新值，一个旧值。
<script setup >
import {ref,watch} from 'vue'
const age = ref(111)
const count = ref(333)
watch([age,count],(newValue,oldValue)=>{
console.log('---watch---',newValue,oldValue);
})
let timer = setTimeout(()=>{
age.value = 1111
count.value = 3333
},1000)
</script>
2.4.3.watch函数 监听单个对象
- 一秒后修改值，输入watch监听日志
日志 ---watch--- Proxy(Object) {name: 'zyj', age: 1}， Proxy(Object) {name: 'zyj', age: 1}
<script setup >
import {reactive,watch} from 'vue'
const obj1 = reactive({
name:'zyj',
age:18
})
watch(obj1,(newValue,oldValue)=>{
console.log('---watch---',newValue,oldValue);
})
setTimeout(()=>{
obj1.age = 1 },1000)
</script>
2.4.4.watch函数 监听多个对象
- 一秒后修改值，输入watch监听日志
日志---watch--- (2) [Proxy(Object), Proxy(Object)]， (2) [Proxy(Object), Proxy(Object)]
一个新值一个旧值
<script setup >
import {reactive,watch} from 'vue'
const obj1 = reactive({
name:'zyj',
age:18
})
const obj2 = reactive({
name:'zyj--',
age:180
})
watch([obj1,obj2],(newValue,oldValue)=>{
console.log('---watch---',newValue,oldValue);
})
setTimeout(()=>{
obj1.age = 1
obj2.age = 2
},1000)
</script>
2.4.5.watch函数 监听对象和ref值
- 一秒后修改值，输入watch监听日志
日志---watch--- (2) [Proxy(Object), 2] (2) [Proxy(Object), 222]
一个新值一个旧值
<script setup >
import {ref,reactive,watch} from 'vue'
const obj1 = reactive({
name:'zyj',
age:18
})
const count= ref(222)
watch([obj1,count],(newValue,oldValue)=>{
console.log('---watch---',newValue,oldValue);
})
setTimeout(()=>{
obj1.age = 1
count.value = 2
},1000)
</script>
2.4.6.watch函数 监听对象属性
使用箭头函数,否则监听不到。如数据是对象需要开启深度监听
- 一秒后修改值，输入watch监听日志
日志---watch--- (3) [1, 2, Proxy(Object)] ，(3) [18, 22222, Proxy(Object)]
下面例子监听obj1.age属性，ref的count，obj1.moudle属性
import {reactive,ref,watch} from 'vue'
const obj1 = reactive({
name:'zyj',
age:18,
module:{
name:'hhhhhh'
}
})
const count = ref(22222)
watch([()=>obj1.age,count,()=>obj1.module],(newValue,oldValue)=>{
console.log('---watch---',newValue,oldValue);
},{immediate:true,deep:true})
setTimeout(()=>{
obj1.age = 1
count.value = 2
obj1.module.name = 'qqqqqqq'
},1000)
</script>
