Composition API

1、Mixin混入

组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取

基本使用

1、将重复的代码封装到了一个JS文件中

2、在需要使用到的组件内部进行引入并使用

export default{ 
    mixin:[LoginMixin];
}

合并规则：

如果Mixin对象中的选项和组件对象中的选项发生了冲突，那么Vue会如何操作呢？

这里分成不同的情况来进行处理；情况一：如果是data函数的返回值对象

1、返回值对象默认情况下会进行合并；

2、如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；

情况二：如何生命周期钩子函数

生命周期的钩子函数会被合并到数组中，都会被调用；

情况三：值为对象的选项，例如methods、components 和directives，将被合并为同一个对象。

1、比如都有methods选项，并且都定义了方法，那么它们都会生效；

2、但是如果对象的key相同，那么会取组件对象的键值对；

全局混入

const app = createApp(App);
app.mixin({
  created() {
    console.log("global mixin created");
  },
});
app.mount("#app");

2、为什么要 从options API 进化到Composition API

1、当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中

2、当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；

3、这种碎片化的代码使用理解和维护这个复杂的组件变得异常困难，并且隐藏了潜在的逻辑问题，并且当我们处理单个逻辑关注点时，需要不断的跳到相应的代码块中；

3、setup

setup函数的参数

第一个参数：props

props有直接作为参数传递到setup函数中，所以我们可以直接通过参数来使用即可；

第二个参数：context

attrs：所有的非prop的attribute；

slots：父组件传递过来的插槽（这个在以渲染函数返回时会有作用，后面会讲到）//基本不用

emit：当我们组件内部需要发出事件时会用到emit（因为我们不能访问this，所以不可以通过this.$emit发出事件）

setup函数的返回值

setup的返回值可以在模板template中被使用，也就是说我们可以通过setup的返回值来替代data选项；

我们可以返回一个执行函数来代替在methods中定义的方法

  setup(props) {
    const changeMsg = (props) => {
      props.message.value = "huajie";
    };
    return {
      changeMsg,
    };
  },

setup不可以使用this

this并没有指向当前组件实例，在setup被调用之前，data、computed、methods等都没有被解析，所以无法在setup中获取this。

4、ReactiveAPI（响应式）

定义：为在setup中定义的数据提供响应式的特性。

    const state = reactive({
      name: "xueyagang"