相较于Vue2 Vue3有哪些优势?

更容易维护

1.组合式API(代码量较少 集中式维护)

2.更好的TypeScript支持

更快的速度

1.重写diff算法

2.模版编译优化

3.更高效的组件初始化

更小的体积

1.良好的TreeShaking

2.按需引入

更优的数据响应式

Vue3使用 JavaScript 原生的 Proxy 对象来创建响应式对象，替代了 Vue 2 中的 Object.defineProperty 方式。Proxy 提供了更强大、灵活且性能更好的方式来拦截和修改对象的行为

组合式API——setup选项

写法 :

执行时机 : 在beforeCreate钩子函数之前进行 获取不到this( this 是undefined )

在setup函数中写的数据和方法需要在末尾以对象的方式return 才能给模版使用 ——> setup 语法糖

script标签添加 setup标记，不需要再写导出语句，默认会添加导出语句

组合式API——reactive和ref函数

1.reactive –> 接受对象类型数据的参数传入并返回一个响应式的对象

2.ref –> 接收简单类型或者对象类型的数据传入并返回一个响应式的对象

本质:在原有传入数据的基础上 外面包了一层对象 包成了复杂类型 再借助reacitve实现的响应式

访问数据需要通过.value

脚本中需要通过.value

template中 不需要添加.value (已经帮我们扒了一层)

组合式API——computed

计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法

组合式API——watch

侦听一个或者多个数据的变化，数据变化时执行回调函数，俩个额外参数 immediate控制立刻执行，deep开启深度侦听

1.侦听一个数据

2.侦听多个数据 将第一个参数改为数组写法即可

3.immediate

在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调

4.deep

通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep

不开deep的话 需要修改对象地址才能监视到整个对象

5.精确侦听对象的某个属性(在不开启deep的情况下 侦听age的变化 只有age变化时才执行回调)

组合式API——生命周期函数

生命周期函数基本使用

1. 导入生命周期函数
2. 执行生命周期函数，传入回调

可以执行多次 会按照顺序依次执行

组合式API——父子通信

一.父传子

1. 父组件中给子组件绑定属性
2. 子组件内部通过props选项接收数据

因为使用了setup语法糖 无法直接配置props选项 此处需要借助于编译器宏 defineProps({})函数 接收父组件传递的数据

defineProps 原理

编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换

传入动态数值 这里以money为例

二.子传父

1. 父组件中给子组件标签通过@绑定事件
2. 子组件内部通过 emit 方法(编译器宏defineEmits)触发事件

简单分析一下上图中进行花钱( 点击购买 )操作后的步骤

点击触发buy函数 —> emit方法触发事件changeMoney并传值’5′ —> 父组件中触发changeMoney事件 —> 触发changeFn函数( 携带值’5′ ) —> changeFn函数进行值的修改

组合式API——模版引用

实现步骤

1. 调用ref函数生成一个ref对象
2. 通过ref标识绑定ref对象到标签
3. 通过ref对象.value即可访问到绑定的元素(必须渲染完成后)

defineExpose

默认情况下在 <script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的

可以通过defineExpose编译宏指定哪些属性和方法容许访问

这里就是指定testMessage属性可以被访问到

组合式API——provide和inject

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

跨层传递普通数据

1. 顶层组件通过 provide 函数提供数据
2. 底层组件通过 inject 函数提供数据

跨层传递响应式数据

在调用provide函数时，第二个参数设置为ref对象

跨层传递方法

顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据( 哪里的数据在哪里修改!!! )

Vue3新特性defineOptions

背景说明：

有 <script setup> 之前，如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性

但是用了 <script setup> 后，就没法这么干了 setup 属性已经没有了，自然无法添加与其平级的属性

为了解决这一问题，引入了 defineProps 与 defineEmits 这两个宏 但这只解决了 props 与 emits 这两个属性

如果我们要定义组件的 name 或其他自定义的属性，还是得回到最原始的用法——再添加一个普通的 <script> 标签

这样就会存在两个 <script> 标签 让人无法接受

所以在 Vue 3.3 中新引入了 defineOptions 宏

顾名思义，主要是用来定义 Options API 的选项。可以用 defineOptions 定义任意的选项， props, emits, expose, slots 除外（因为这些可以使用 defineXXX 来做到）

Vue3新特性defineModel

在Vue3中，自定义组件上使用v-model, 相当于传递一个modelValue属性，同时触发 update:modelValue 事件

我们需要先定义 props，再定义 emits 其中有许多重复的代码 如果需要修改此值，还需要手动调用 emit 函数

所以defineModel诞生了 下面是使用示例

子组件

父组件