vue3新特性、Composition API vs options API 的区别、setup 函数

vue3新特性：

Vite 的使用:

Vite 是一个原生 ESM 驱动的 web 开发构建工具, 在开发环境下基于浏览器原生 ES imports 开发

可以用于快速构建 vue3 的工程化项目环境 

Vite 的基本使用:

 vite 创建 vue 3.x 的工程化项目

npm init vite-app 项目名称
或者
yarn create vite-app 项目名称

cd 项目名称
yarn
yarn dev

Composition API

composition API 与 options API 的区别

1. vue2 采用的就是 options API

   (1) 优点:便于学习和使用,每个代码有着明确的位置 (例如: 数据放 data 中, 方法放 methods中)

   (2) 缺点: 相似的逻辑, 不容易复用, 在大项目中尤为明显

   (3) 虽然 optionsAPI 可以通过mixins 提取相同的逻辑, 但是也并不是特别好维护

2. vue3 新增的就是 composition API

   (1) compositionAPI 是基于逻辑功能组织代码的, 一个功能 api 相关放到一起

   (2) 即使项目大了, 功能多了, 也能快速定位功能相关的 api

   (3) 大大的提升了代码可读性和可维护性

3. vue3 推荐使用 composition API, 也保留了options API

   即就算不用composition API, 用 vue2 的写法也完全兼容

setup 函数

composition的使用, 需要配置一个setup 函数

1. setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点

2. 从生命周期角度来看, setup 会在 beforeCreate 钩子函数之前执行

3. setup 中不能使用 this, this 指向 undefined

4. 在模版中需要使用的数据和函数，需要在 setup 返回。

<template>
  <div class="container">
    <h1 @click="say()">{{msg}}</h1>
  </div>
</template>

<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }

    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}
</script>