组合式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编译宏制定哪些属性和方法允许访问