[JavaScript知识库]Vue3新功能

1.vue3带来了什么

六大亮点：

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

源码的升级：
使用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组件选项

1. setup是vue3中的一个新的配置项，值为一个函数
2. 组件中所用到的：数据、方法等等，均要配置在setup中
3. 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>

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