一、了解mixin

若组件和组件之间有相同的代码逻辑，可以用mixin抽取

mixin合并规则

①返回的对象默认合并，如果data里面的值发生冲突，保留组件自身的数据

②生命周期函数会一起合并，全部执行

③像methods、components等全部执行,但是methods里面的函数，保留自身的函数

另外一个类似于Mixin的方式是通过extends属性，了解一下（只能继承对象里面的东西）

//基本使用
//mixin文件
export const m = {
    data(){
        return {
            message:'hello'
        }
    }
}

//index.vue文件
<template>
    <div>
    <!--hello world-->
        {{message + ' ' + test}}
    </div>
</template>
import { m } from './mixin'
export default {
    name:'index',
    mixins:[m],
    data() {
        return {
            test: 'world'
        }    
    }
}

二、了解options API和vue composition APl的区别

在vue里面有一个个对象，data(),name,props,components,methods,created(),mounted()等等

optionsAPI就是包含这些对象，在vue2里面使用的就是optionsAPI

Options API的一大特点就是在对应的属性中编写对应的功能模块

这个options API有很大的弊端，代码太分散了，例，写一个点击显示数据的逻辑，要在data()创建一个变量，要在methods中进行点击处理，要在watch中监听。假设这个vue文件有1w行代码，那么代码的可读性就很差了，因为你需要去data找变量，去methods中找函数等等

vue composition API 又称VCA，主要作用就是把这个点击显示数据的逻辑全部写一起

三、了解setup

import { reactive, ref} from 'vue'
export default {
    setup(props,{ attrs, slots, emit }){
        //一参是props里面的东西，二参里面有context{attrs:{}，slots:{}，emit:{}}
        //非props的attrs
         console.log(props)
        console.log(attrs)
        console.log(slots)
        console.log(emit)
        //返回值，写一个点击逻辑，定一个变量，点击时++
        const n = 0
        const nFun = () => {
            n++
        }
        
        //这里return，相当于data()但不是响应式，若在data()同时定义了n变量，会取setup里面的
        //要响应式，先导入reactive
        //如果我们传入一个基本数据类型（String、Number、Boolean）会报一个警告；
        //导入ref
        return {
            n,
            nFun
        }
    }
}

在setup函数中，不能使用this，因为setup没有绑定this（在vue3源码里）

①reactive api

②ref api

③readonly api

④toRefs api / toRef api，前者对所有reactive进行转ref，后者只转一个

⑤shallowRef api，浅层响应式，配合tiggerRef api可以手动触发深层响应式

⑥custoRef api，自定义ref

⑦computed api，返回的是一个ref对象，用法跟options api 的计算属性一样

⑧watchEffect / watch，前者自动收集响应式数据依赖并且一开始就执行一次，

⑨生命周期钩子，onX