组合式API
1.setup
定义的数据和方法必须return出去才能够被使用
不使用this,this指向了undefined
<script>
export default {setup () {console.log('setup')const message = 'this is message'const logmessage = ()=>{console.log(message)}return {message,logmessage}},beforeCreate () {console.log('beforeCreate')}}
</script>更加简单的方式：语法糖：在script中加入setup
<script setup>const message = 'this is message'const logmessage = ()=>{console.log(message)}
</script>2.reactive和ref函数
reactive（）函数接受对象类型数据参数传入并返回一个响应式的对象
<script setup>
import { reactive } from 'vue';const state = reactive({count:0})const setcount =()=>{state.count++}
</script><template><button @click="setcount">{{ state.count }}</button>
</template>ref（）函数即支持简单类型也支持对象类型数据传入并返回一个数据
<script setup>
import { ref } from 'vue';const state = ref(0)const setcount =()=>{state.value++}
</script><template><button @click="setcount">{{ state }}</button>
</template>note: 脚本区域更改ref产生的响应式数据，必须通过 .value属性
3.computed 计算属性函数
<script setup>
import { computed,ref } from 'vue';
const list = ref([1,2,3,4,5,6,7,8])
//使用filter属性进行筛选
const computedstate = computed(()=>{return list.value.filter(iter=>iter>2)})setTimeout(() => {list.value.push(9,10)
}, 3000);</script><template><div>原始数组{{list}}</div><div>计算属性数组{{computedstate}}</div>
</template>通过computedstate计算列表大于2的数，其中settimeout为计时器，到3000ms后将9，10放入list中
4.watch 函数
侦听一个或者多个数据的变化，数据变化时执行回调函数
保持两个额外参数：1.immediate（）立即执行，2.deep（深度监听）
watch函数共有两个参数，一个是要监听的数据，另一个是当该数据变化时要执行的函数，第一个参数的ref对象不需要加.value，它会自动的处理
<script setup>
import { computed,ref, watch, } from 'vue';
const count = ref(0)
const setcount=()=>{count.value++
}watch(count,()=>(console.log('count变化了')
))</script><template><div><button @click="setcount">{{ count }}</button></div></template>如果向要监听多个数据变化，我们的数据由之前单一的格式变为数组，在数组里面放自己想要监听的数据，前面数组为新值，后面数组为老值
<script setup>
import { computed,ref, watch, } from 'vue';
const count = ref(0)
const name = ref('cp')
const setcount=()=>{count.value++
}
const setname=()=>{name.value = 'pc'
}watch([count,name],([newcount,newname],[oldcount,oldname])=>(console.log('变化了')
))</script><template><div><button @click="setcount" >{{ count }}</button></div><div><button @click="setname">{{ name }}</button></div></template>immediate 在监听器创建时立即触发回调，响应式数据变化之后继续执行回调
deep 通过watch监听的ref对象默认是浅层监听的，直接修改嵌套的对象属性不会触发回调执行如（对于ref(count:0)来说此时如果直接使用state.value.count++不会使得按钮后修改），需要开启deep选项
如果不开启deep，我们可以在watch函数中使用()=>info.value.age来监听age，info为定义的变量
5.生命周期函数
在API中，很多选项式API都被嵌套进入组合式API中，比如beforeCreate嵌套进入setup中
6.组合式API-父子通信
组合式API下的父传子
1.父组件给子组件绑定属性，2.子组件内部通过props选项接收
setup语法糖下局部组件无需注册即可使用
父组件通过写在template中的SonCom来进行数据传递
子组件通过defineProps接收数据
note：如果是响应式数据需要在SonCom后面加：,同时响应数据在父组件改变后也会改变子组件
组合式API下的子传父
1.父组件给子组件变迁通过@绑定事件，2.子组件内部通过$emit方法触发事件
<template><sonComVue @get-message="getMessage" />
</template>const emit = defineEmits(['get-message'])
const sendMsg = () => {emit('get-message','this is son msg')
}如果触发自定义事件，相当于使用了我们所定义的getMessage函数，比如打印函数
const getMessage = (msg) =>{console.log(msg)
}
7.组合式API--模块引用
通过ref标识获取真实的dom对象或者组件实例对象
调用ref(null)生成一个ref对象，通过ref标识绑定ref对象到标签
note：使用onmounted进行组件挂载，确保组件挂载完毕之后获取
默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，通过defineExpose编译宏制定哪些属性和方法允许访问
