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