vue3.0学习笔记（四）——关于setup语法糖补充以及新特性

1. 为什么要学 Vue3

1.1 为什么要学 Vue3

1.2 Vue3的优势

1.3 Vue2 选项式 API vs Vue3 组合式AP

需求：点击按钮，让数字 +1

2. create-vue搭建Vue3项目

2.1 认识 create-vue

create-vue是Vue 官方新的脚手架工具 ，底层切换到了 vite（下一代构建工具 ） ，为开发提供极速响应

2.2 使用create-vue创建项目

① 前提环境条件

• 已安装 16.0 或更高版本的 Node.js
  • node -v

② 创建一个Vue应用

• npm init vue@latest
  • 这一指令将会安装并执行 create-vue（vue@latest: 这是一个指定要使用的包（vue）的名称和版本（latest 表示最新版本））
  • 避免了之前创建项目使用 npm init vite-app 项目名称 或者 yarn create vite-app 项目名称，版本不兼容的问题。
• 输入项目名称

2.3 vue2和vue3中 vscode 快捷插件

• vue2.0

• vue3.0

3. 熟悉项目目录和关键文件

3.1 项目目录和关键文件

关键文件：

① vite.config.js - 项目的配置文件 基于vite的配置  

② package.json - 项目包文件 核心依赖项变成了 Vue3.x 和 vite

③ main.js - 入口文件 createApp函数创建应用实例

④ app.vue - 根组件 SFC单文件组件 script - template - style

• 变化一：脚本script和模板template顺序调整

• 变化二：模板template不再要求唯一根元素

• 变化三：脚本script添加setup标识支持组合式API

⑤ index.html - 单页入口 提供id为app的挂载点

4. 组合式API - setup选项

4.1 setup选项的写法和执行时机

• 执行时机，比 beforeCreate 还要早
• setup 函数中，获取不到 this （this 的值为 undefined）
• 数据和函数，需要在 setup 最后 return，才能在模版中应用
• 每次都要去 return 太麻烦
• 通过 setup 语法糖简化代码

4.2 setup选项中写代码的特点

4.3 <script setup> 语法糖

• 原始复杂写法

• 语法糖写法

4.4 <script setup> 语法糖原理

4.5 总结

• setup选项的执行时机？
  • beforeCreate钩子之前 自动执行
• setup写代码的特点是什么？
  • 定义数据 + 函数 然后以对象方式return
• <script setup>解决了什么问题？
  • 经过语法糖的封装更简单的使用组合式API
• setup中的this还指向组件实例吗？
  • 指向undefined

5. 组合式API - reactive和ref函数

5.1 reactive()

作用：接受对象类型数据的参数传入并返回一个响应式的代理对象（Proxy(Object)）

核心步骤：

         ① 从 vue 包中 导入 reactive 函数

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

5.2 ref()

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

核心步骤：

        ① 从 vue 包中 导入 ref 函数

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

5.3 总结

• reactive和ref函数的共同作用是什么 ？
  • 用函数调用的方式生成响应式数据
• reactive vs ref ？
  • reactive不能处理简单类型的数据
  • ref参数类型支持更好但是必须通过.value访问修改
  • ref函数的内部实现依赖于reactive函数
• 在实际工作中推荐使用哪个？
  • 推荐使用ref函数，更加灵活统一

6. 组合式API - computed

6.1 computed计算属性函数

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

核心步骤：

        ①  导入 computed函数

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

6.2 计算属性小案例

计算公式： 始终从原始响应式数组中筛选出大于2的所有项 - filter

6.3 计算属性 get 和 set

6.4 总结

最佳实践

• 计算属性中不应该有“副作用”
  • 比如异步请求/修改dom
• 避免直接修改计算属性的值
  • 计算属性应该是只读的，特殊情况可以配置 get set

7. 组合式API - watch

7.1 watch函数

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

俩个额外参数：

        ① immediate（立即执行）         

        ② deep（深度侦听）

7.2 基础使用 - 侦听单个数据

① 导入watch 函数

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

7.3 基础使用 - 侦听多个数据

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

7.4 immediate

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

7.5 deep

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

        错误代码如下：

        以上代码侦听不到，因为 watch 侦听的是 userInfo 这个对象(userInfo.value)，对 userInfo 内部的 name 属性值进行更改后，不会导致整个 userInfo 的地址发生改变。所以侦听不到，只有把这个对象的地址完全改变才能侦听到。

        正确代码如下：

7.6 精确侦听对象的某个属性

需求：在不开启deep的前提下，侦听age的变化，只有age变化时才执行回调

7.7 总结

• 作为watch函数的第一个参数，ref对象需要添加.value吗？
  • 不需要，第一个参数就是传 ref 对象
• watch只能侦听单个数据吗？
  • 单个 或者 多个
• 不开启deep，直接监视 复杂类型，修改属性 能触发回调吗？
  • 不能，默认是浅层侦听
• 不开启deep，精确侦听对象的某个属性？
  • 可以把第一个参数写成函数的写法，返回要监听的具体属性

8. 组合式API - 生命周期函数

8.1 Vue3的生命周期API （选项式 VS 组合式）

8.2 生命周期函数基本使用

① 导入生命周期函数

② 执行生命周期函数 传入回调

8.3 执行多次

生命周期函数是可以执行多次的，多次执行时传入的回调会在 时机成熟时依次执行。（因为它就是以函数调用的方式执行）

8.4 总结

• 组合式API中生命周期函数的格式是什么？
  • on + 生命周期名字
• 组合式API中可以使用onCreated吗？
  • 没有这个钩子函数，直接写到setup中
• 组合式API中组件卸载完毕时执行哪个函数？
  • onUnmounted

9. 组合式API - 父子通信

9.1 组合式API下的父传子

基本思想

        ① 父组件中给 子组件绑定属性

        ② 子组件内部通过 props选项接收

• 原始写法不使用<script setup> 语法糖

父组件：

子组件：

• <script setup> 语法糖写法

父组件：

子组件：

• 由于写了 setup 糖果语法，所以无法直接配置 props 选项

• 子组件中通过 编译宏 defineProps 接收属性

• 编译宏只能在一个组件中各定义一次，不能重复定义。

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

9.2 组合式API下的子传父

基本思想

        ① 父组件中给 子组件标签通过@绑定事件

        ② 子组件内部通过 emit 方法触发事件

• 原始写法不使用<script setup> 语法糖

父组件：

子组件：

• setup 里接收两参数，一个是 props 属性，一个是 context 上下文
• props 参数包含了从父组件传递给当前子组件的所有属性。它是一个响应式对象，这意味着当父组件中的属性值发生变化时，props 中对应的值也会自动更新。
• context 参数是一个包含了当前组件上下文的对象。它包括 attrs、slots 和 emit 等属性。这些属性为组件提供了访问父组件传递的非 props 属性、插槽内容以及触发事件的方法。

• <script setup> 语法糖写法

父组件

子组件：

9.3 总结

父传子

• 父传子的过程中通过什么方式接收props？
  • defineProps( { 属性名：类型 } )
• setup语法糖中如何使用父组件传过来的数据？
  • const props = defineProps( { 属性名：类型 } )
  • props.xxx

子传父

• 子传父的过程中通过什么方式得到emit方法？
  • defineEmits( [‘事件名称’] )
• 怎么触发事件
  • emit('自定义事件名' , 参数)

10. 组合式API - 兄弟组件之间通信

10.1 vue2.0兄弟组件间通信——eventBus

① src/EventBus/index.js – 创建空白Vue对象并导出

② 在要传递值的组件     

        eventBus.$emit('事件名', 值)

③ 在要接收值的组件的Create生命周期里   

        eventBus.$on('事件名', 函数体)

10.2 组合式API - 兄弟组件之间通信——mitt

① 下载安装 mitt 库 

• npm install mitt 或者 yarn add mitt

② src/EventBus/index.js – 创建空白mitt对象并导出

10

③ 在要传递值的组件     

        eventBus.emit('事件名', 值)

④ 在要接收值的组件  

        eventBus.on('事件名', 函数体)

11. 组合式API - 模版引用

11.1 模板引用的概念

通过 ref标识 获取真实的 dom对象或者组件实例对象

10

11.2 如何使用（以获取dom为例 组件同理）

① 调用ref函数生成一个ref对象（ null，因为 setup，在组件创建之前就已经开始执行，dom渲染完成之后才会完成绑定 ）

② 通过ref标识绑定ref对象到标签

11.3 defineExpose()

① 如果子组件未使用<script setup>语法糖，子组件内部的属性和方法，父组件可以访问到。所有需要暴露给模板或父组件的方法和属性都通过 return 返回出来了。（setup () { return }）

• 子组件中定义了count 和 sayHi 方法

• 通过模版引用父组件可以拿到 count 和 sayHi 方法

② 默认情况下在<script setup>语法糖下 组件内部的属性和方法是不开放 给父组件访问的，可以通过defineExpose编译宏 指定哪些属性和方法允许访问。

• 子组件中通过 defineExpose编译宏暴露 count 和 sayHi 方法

• 通过模版引用父组件可以拿到 count 和 sayHi 方法

11.4 总结

• 获取模板引用的时机是什么？
  • 组件挂载完毕
• defineExpose编译宏的作用是什么？
  • 显式暴露组件内部的属性和方法

12. 组合式API - provide和inject

12.1 作用和场景

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

vue2.0中的 provide 和 inject

12.2 跨层传递普通数据

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

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

12.3 跨层传递响应式数据

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

12.4 总结

• provide 和 inject 的作用是什么？
  • 跨层组件通信
• 如何在传递的过程中保持数据响应式？
  • 第二个参数传递ref对象
• 底层组件想要通知顶层组件做修改，如何做？
  • 传递方法，底层组件调用方法
• 一颗组件树中只有一个顶层或底层组件吗？
  • 相对概念，存在多个顶层和底层的关系

13. Vue3.3新特性-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 来做到）

14. Vue3.3新特性-defineModel（了解，不常用）

14.1 在vue2.0中v-mode语法糖简写的代码 

v-model用于组件上

父组件：

子组件：

• 当输入框的内容发生变化时（即触发 @input事件），子组件会触发（$emit）一个名为 input 的自定义事件，并将输入框的当前值作为事件参数传递给父组件。

14.4 Vue3 中的 v-model 和 defineModel

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

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