Vue3-组合式Api以及响应式原理解读（一）_setup理解

全方位解析setup

1. setup描述
 
2. setup参数解析

3. setup返回值解析

4. setup生命周期钩子解析

5. setup与data,methods定义的那些事

setup描述

    1. setup在组件创建之前执行且只会执行一次
    
    2. setup是所有组合式API的统一入口
    

setup参数解析

    Parent:
        <Child v-if="isShow" :msg="msg" msg2="V2-v3谁更香" @xxx='updateChildMsg'/>
        
        setup() {
            const isShow = ref(true);
            const msg = ref('vue3真香!')
            const updateChildMsg=(text)=>{
              console.log('我是父组件的方法,接收子组件传过来的参数为:',text);
              msg.value += text
            }
            return {
              isShow,
              msg,
              updateChildMsg
            };
        }
        
    Child:
      props: ["msg"],
      setup(porps, context) {
        console.log("v3被执行了，触发setup生命周期", porps, context.attrs, context);

        let c_emit = () => {
          context.emit("xxx", "===="); // `xxx` 父组件传递过来的分发事件
        };

        return {
          c_emit,
        };

    setup(props,context){
    - 根据形参来看 参数分为两个
         1. props - 由上方图结合代码来看，props接收的就是Child-Props接收到的只读对象参数['msg']
         2. context
             1. attr - attr 接收到的参数为父组件传递过来,除去props接收的参数，['msg2']
             2. emit - 父组件传递过来的回调事件，用于事件分发
             3, slot - 插槽
    }

setup返回值解析

    总结：
    
      因为setup返回的是一个return的对象，供html模板使用，所有setup函数不能使用async函数,
    
      因为会导致返回的是一个Promise对象, 所以setup函数不能使用async函数

setup生命周期钩子解析

vue2 - vue3 生命周期对比一览

选项式API	组合式API	用法
beforeCreate	setup	组件初始化之前创建
created	setup	组件初始化之前创建
beforeMount	onBeforeMount	同原用法
mounted	onMounted	同原用法,一般请求,初始化调用
beforeUpdate	onBeforeUpdate	同原用法
updated	Updated	同原用法
beforeUnmount	onBeforeUnmount	同原用法
unmounted	Unmounted	同原用法

（其余生命周期这里不做举例,详情查看下方打印信息）

    总结：
    
    1. setup相当于之前Vue2的beforeCreate与created，但比他俩执行快，且执行一次
    
    2. 组合式API中的生命周期函数都比原Vue2生命周期函数执行的要快

setup与data,methods定义的那些事

    总结：
    
    1. 在seutp中定义的变量属性跟data中定义的变量属性会合并
    
    2. 在setup中定义的方法函数跟methods定义的方法函数会合并
    
    3. 如果在setup中定义的属性/方法与data、methods定义的有重合,默认setup-不建议混合使用,会报错

回顾

这一节, 主要是理论性的东西多一些，所以大多都是用代码配图的形式来增加记忆理解

下一节

ref与reavtive的理解

期待

新手上路，记录一下学习过程，如有描述不当的、希望大佬能不吝赐教，如果能点个👍，发表两句读后感，一起进步学习那是最好啦 🐂~ 加油啦冲冲冲~