Vue3介绍

Vue3的重大改变：

• 使用Proxy代替defineProperty实现响应式

• 重写虚拟DOM的实现和Tree-Shaking

• -还有一个重大的特点就是它全面的支持Typescript ......

新特性（组合式API）

1. 新的setup的配置
2. ref与reactive
3. watch与watchEffect
4. provide与inject
5. 新的生命钩子
6. 移除keyCode支持作为 v-on 的修饰符 ...

拥有新的内置组件

• Fragment
• Teleport
• Suspense

好了了解一下vue3的新特性，那我们开始构建vue3的新新项目吧！

构建Vue3的项目

现在我们就直接使用最新的vite来构建这个项目吧！

首先如果你对项目的构建感兴趣的话可以点击v3.cn.vuejs.org/guide/insta… 或者进入官网：vitejs.cn

新的构建工具特点： 开发环境中，无需打包操作，可快速的冷启动。

• 轻量快速的热重载（HMR）。
• 真正的按需编译，不再等待整个应用编译完成。

**重点**：我们需要安装上16.0及以上的版本，要不然会出错 点击： Node.js (nodejs.org) 即可安装node

根据提示我们直接点击就可以

 -## 安装依赖
1.- npm install
 - ## 运行
2.- npm run dev

常用 Composition API

1.拉开序幕的setup

• 这其实就是一个vue3中的一个新的配置项 组件中的与方法、函数等都需要写在setup中
• 若直接返回一个对象，那么在对象中的数据和方法都可以直接调用 无需再次声明，极大的便利了我们的开发
• 在vue2与vue3中有一定的冲突：所以我们在使用vue3的时候要尽量避免vue2的写法混入其中
• 在setup这个函数中，它是最优先执行的，可以说这是“打开大门的钥匙” -setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

1. setup执行的时机

• 在beforeCreate之前执行一次，this是undefined。

2. setup的参数

• props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
• context：上下文对象

  • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

  • slots: 收到的插槽内容, 相当于 this.$slots。

  • emit: 分发自定义事件的函数, 相当于 this.$emit。

2.ref函数

• 作用: 定义一个响应式的数据
• 语法: const xxx = ref(initValue)
  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
  • JS中操作数据： xxx.value
  • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
• 备注：

  • 接收的数据可以是：基本类型、也可以是对象类型。

  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

  • 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

  3.reactive函数

  作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

4.Vue3.0中的响应式原理

• 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

• 通过Reflect（反射）: 对源对象的属性进行操作。

en....有点小累。。。