最新版本Vue3的学习笔记-第三章(第一部分)

第一章

第二章

第三章

3. Vue3核心语法

3.1. 【OptionsAPI 与 CompositionAPI】

• Vue2的API设计是Options（配置）风格的。
• Vue3的API设计是Composition（组合）风格的。

Options API 的弊端

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

Composition API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

说明：以上四张动图原创作者：大帅老猿

3.2. 【拉开序幕的 setup】

setup 概述

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。

特点如下：

• setup函数返回的对象中的内容，可直接在模板中使用。
• setup中访问this是undefined。
• setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

setup 的返回值

• 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**
• 若返回一个函数：则可以自定义渲染内容，代码如下：

setup(){
  return ()=> '你好啊！'
}

setup 与 Options API 的关系

• Vue2 的配置（data、methos…）中可以访问到 setup中的属性、方法。
• 但在setup中不能访问到Vue2的配置（data、methos…）。
• 如果与Vue2冲突，则setup优先。

setup 语法糖

setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：

扩展：上述代码，还需要编写一个不写setup的script标签，去指定组件名字，比较麻烦，我们可以借助vite中的插件简化

1. 第一步：npm i vite-plugin-vue-setup-extend -D
2. 第二步：vite.config.ts

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

3. 第三步：

   3.4. 【reactive 创建：对象类型的响应式数据】

   • 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
   • 语法：let 响应式对象= reactive(源对象)。
   • **返回值：**一个Proxy的实例对象，简称：响应式对象。
   • 注意点：reactive定义的响应式数据是“深层次”的。

   3.5. 【ref 创建：对象类型的响应式数据】

   • 其实ref接收的数据可以是：基本类型、对象类型。
   • 若ref接收的是对象类型，内部其实也是调用了reactive函数。

   3.6. 【ref 对比 reactive】

   宏观角度看：

   1. ref用来定义：基本类型数据、对象类型数据；

   2. reactive用来定义：对象类型数据。

   • 区别：

   1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。

      

   2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

   • 使用原则：

   1. 若需要一个基本类型的响应式数据，必须使用ref。
   2. 若需要一个响应式对象，层级不深，ref、reactive都可以。
   3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

   3.7. 【toRefs 与 toRef】

   • 作用：将一个响应式对象中的每一个属性，转换为ref对象。
   • 备注：toRefs与toRef功能一致，但toRefs可以批量转换。
   • 语法如下：

   3.8. 【computed】

   作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。

   

   项目源码有帮助到你的，清点个小星星