Vue3精简版总结

一、Vue3的优势

二、create-vue搭建Vue3项目

三、熟悉项目目录和关键文件

关键文件：

1. vite.config.js - 项目的配置文件 基于vite的配置
2.  package.json - 项目包文件 核心依赖项变成了 Vue3.x 和 vite
3.  main.js - 入口文件 createApp函数创建应用实例
4. index.html - 单页入口 提供id为app的挂载点
5.  app.vue - 根组件 SFC单文件组件 script - template - style

• 变化一：脚本script和模板template顺序调整
• 变化二：模板template不再要求唯一根元素
• 变化三：脚本script添加setup标识支持组合式API

四、组合式API - setup选项

1.setup选项的执行时机？

beforeCreate钩子之前 自动执行

2. setup写代码的特点是什么？

定义数据 + 函数 然后以对象方式return

3. <script setup>解决了什么问题？

经过语法糖的封装更简单的使用组合式API

4. setup中的this还指向组件实例吗？

指向undefined

五、组合式API - reactive和ref函数

1.reactive()

作用：接受对象类型数据的参数传入并返回一个响应式的对象。

1. 从 vue 包中 导入 reactive 函数。

2. 在 <script setup> 中 执行 reactive 函数 并传入 类型为对象 的初始值，并使用变量接收返回值。

2.ref()

作用： 接收 简单类型或者对象类型的数据 传入 并返回一个 响应式的对象。

1. 从 vue 包中 导入 ref 函数。

2. 在 <script setup> 中 执行 ref 函数 并传入初始值，使用 变量接收 ref 函数的返回值。

1.reactive和ref函数的共同作用是什么 ？

用函数调用的方式生成响应式数据

 2.reactive vs ref ？

• 1. reactive不能处理简单类型的数据
• 2. ref参数类型支持更好但是必须通过.value访问修改
• 3.ref函数的内部实现依赖于reactive函数

 3.在实际工作中推荐使用哪个？

推荐使用ref函数，更加灵活统一

六、组合式API - computed

1.computed计算属性函数

核心步骤：

1. 导入 computed函数

2. 执行函数 在回调参数中 return基于响应式数据做计算的值 ，用 变量接收

七、组合式API - watch

作用: 侦听 一个或者多个数据 的变化，数据变化时执行回调函数

俩个额外参数：

1.基础使用 - 侦听单个数据

1. 导入watch 函数

2. 执行watch函数 传入要侦听的响应式数据 (ref对象) 和回调函数

2.基础使用 - 侦听多个数据

说明：同时侦听多个响应式数据的变化，不管哪个数据变化都需要执行回调

3. immediate（立即执行）

说明：在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调

4. deep（深度侦听）

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

八、组合式API - 生命周期函数

1.Vue3生命周期

Vue各生命周期函数的描述

2.Vue2和Vue3的生命周期函数。

九、组合式API - 父子通信

1.组合式API下的父传子

2.组合式API下的子传父

• 父传子

1. 父传子的过程中通过什么方式接收props？

defineProps( { 属性名：类型 } )

2. setup语法糖中如何使用父组件传过来的数据？

const props = defineProps( { 属性名：类型 } )

props.xxx

• 子传父

1. 子传父的过程中通过什么方式得到emit方法？

defineEmits( [‘事件名称’] )

2. 怎么触发事件

emit('自定义事件名' , 参数)

十、组合式API - 模版引用

1.defineExpose()

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

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

2.组合式API - provide和inject 1

作用和场景

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

跨层传递普通数据

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

2. 底层组件通过 inject函数获取 数据

跨层传递响应式数据

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

跨层传递方法

顶层组件可以向底层组件传递方法， 底层组件调用方法修改顶层组件中的数据

十一、Vue3.3新特性

1.defineOptions

背景说明：

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

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

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

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

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

2.defineModel