1.vue3带来了什么

六大亮点：

编译性能比vue2.x快1.2~2倍：
diff算法优化
hoist Static静态提升
cacheHandlers事件侦听器缓存
按需编译，体积比vue2.x更小。
支持组合API(类似与React hook).
更好的TS支持。
暴露了自定义渲染API。
使用更先进的组件。

源码的升级：
使用proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-shaking……

2.创建工程

2.1通过脚手架vue-cli

vue create hello-vue3

2.2.通过脚手架vite

什么是vite：新一代前端构建工具
优势：
开发环境中，无需打包操作，可快速的冷启动
轻量快速的热重载HMR
真正的按需编译，不再等待整个应用编译完成
创建工程：

//创建工程
npm init vite-app <project-name>
//进入工程目录
cd <project-name>
//安装依赖
npm install
//运行
npm run dev

3.组合式API

3.1.setup组件选项

setup是vue3中的一个新的配置项，值为一个函数
组件中所用到的：数据、方法等等，均要配置在setup中
setup函数的两种返回值：
若返回一个对象，则对象中的属性、方法、在模板中均可以直接使用
若返回一个渲染函数，则可以自定义渲染内容(了解)

<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h2>年龄：{{age}}</h2>
    <button @click="sayHello">说话</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  setup() {
    let name = 'slineee'
    let age =18

    function sayhello() {
      console.log('hello');
    }

    return {
    name,
    age,
    sayhello
    } 
   
   //返回渲染函数：
   //return () => h('h1','slineee')
  }
}
</script>

注意：尽量不要与vue2配置混用
vue2中可以访问到setup中的属性与方法
但在setup中不能访问到vue2的配置(data、methods)
如果有重名，vue3优先
setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性