vue3 学习
setup 函数
1、执行时机在 beforeCreate 和 created这两个钩子函数之前，是最早执行的，在程序运行中，setup函数只执行一次
2、在setup中没有this , 打印返回undefined
vue3里的生命周期：
① 可以和vue2里一样选项式写法，和setup平级，beforeCreate/ created/ beforeMount/ mounted / beforeUpdate / updated / beforeUnmount / unmounted
② 可以在setup里调用生命周期。调用的时候，在原来的api上加上on换成驼峰命名 ，如 ：beforeMount -> onBeforeMount，而且在setup里调用的生命周期会比你用选项式写法执行的时机会快一点。
注：在vue2中组件卸载的api为 destroyed 在vue3中组件卸载api换成了 unmounted
3、setup里接收的参数 props, context
props：和vue2中组件中props意思一样，都是接收传过来的参数必须对props传过来的参数先进行声明，如果没声明，传过来的参数将出现在attrs中
// 声明时props和setup同级,可以通过以下方式对父组件传递的参数在props中声明
props:{
msg:String,
name:String
},
context ：上下文，包括 attrs 、 emit 、slots。
① attrs :在此部分，接收在父组件传递过来的，并且没有在props中声明的参数参数。
② emit：子组件对父组件发送事件
在vue2中，子对父发送事件采用this.$emit对父组件发送事件，在vue3中子组件对父组件发送事件采用context.emit发送事件
// 在子组件中
<button @click="postMsg">
我是子组件，我要向父组件发送事件了
</button>
// js 部分
setup(props,context){
function postMsg(){
console.log('我发送了')
context.emit('pMSg',{msg:'我是子组件发送的信息'})
}
return {postMsg}
}
父组件中进行接收
<test @pMSg="func" />
// js 部分
setup(props,context){
const func = (e)=>{
console.log('子组件发送过来的信息',e)
}
return { func }
}
点击按键
③ slots：和vue2中的插槽使用类似
插槽使用 :
// 在子组件中
// 具名插槽，在name中给插槽命名名字
<slot name='title'></slot>
<slot name="content"></slot>
// 默认插槽
<slot></slot>
此时在子组件中的setup里打印出context.slots ，里面都显示出了所有你在子组件里写的插槽。
// 在父组件中的使用
// v-slot:[name] 可以通过这种方式动态的写插槽名
<template v-slot:[name]>我是插槽里的内容</template>
<template v-slot:title> 我是插槽里的标题 </template>
<template v-slot>asdasd</template>
ref 函数 和 reactive 函数
这两个函数可以让一个原始数据(普通数据)变成响应式数据，但他们实现的原理方式不一样。
在vue3中你可以在setup中定义数据,但你定义的都是一个普通数据，当你对它进行修改时，它是视图没有发送变化，但实际上数据已经发生了变化。而ref和reactive就可以帮助你，将数据变成响应式数据
<div>我叫{{uName}}</div><button @click="changeName">我要改名了</button>
setup(){
// 数据定义
let name = ref('green')
// 定义一个方法对名字进行修改
function changeName(){
uName.value = 'red' // 在ref中定义的数据需要通过.value进行获取
}
return {name,changeName}
}
如果不使用ref,那么点击按钮时，视图时不会发生变化的
ref 适用于定义一些需要响应式的基本数据类型数据，如number,string等reactive 用于定义复杂的数据类型，如数组，字典
① ref 后的数据会生成一个RefImpl实例对象,它的响应式原理是通过object.defineProperty 来实现数据劫持的，通过里面的get()和set()来实现响应式
② reactive 后的数据会生成一个Proxy实例对象（代理对象），他是通过proxy来实现数据的响应式。
③如果复杂数据类型使用ref绑定成响应式数据，在第一层会生成RefImpl实例对象，但是它的value是一个Proxy实例对象
computed 函数
watch 函数
watchEffect 函数
hook自定义函数
toRef / toRefs
shallowReactive / shalowRef
readonly 函数
shallowreadonly 函数
toRaw 函数
markRaw 函数