Vue3学习笔记 —— Composition API 快速入门

在 Vue3 中，上述的方式依然可以使用。但是我们今天要使用 Vue3 的 Composition API 完成同样的功能

3.1 Composition API setup() 函数 的响应式引用

学习指引：

1. 在 setup 函数中定义参数

2. 在 setup 函数中定义方法

3. 在 setup 函数中定义计算属性

setup 函数

• 使用 Composition API 的入口

• 在 beforeCreate 之前调用

• 在 setup 中没有 this 关键字

ref 函数

• 返回一个 响应式引用

• name 是一个响应式对象

姓名：{{name}}

年龄：

<button type=“button” @click=“changeAge(-1)”>+

{{age}}

<button type=“button” @click=“changeAge(1)”>+

出生年份: （插值表达式实现） {{2020 - age}}

出生年份：（计算属性实现）

<button type=“button” @click=“changeYear(-1)”>-

{{year}}

<button type=“button” @click=“changeYear(1)”>+

3.2 Composition API setup() 函数 响应式对象

上面的代码是不是看起来很冗余，这下我们使用 响应式对象 来简化上面的代码

• 使用 reactive 将一个对象 => 响应式对象

• 使用 toRefs 将 响应式对象 => 普通对象

姓名：{{name}}

年龄：

<button type=“button” @click=“changeAge(-1)”>+

{{age}}

<button type=“button” @click=“changeAge(1)”>+

出生年份: （插值表达式实现） {{2020 - age}}

出生年份：（计算属性实现）

<button type=“button” @click=“changeYear(-1)”>-

{{year}}

<button type=“button” @click=“changeYear(1)”>+

效果同上图

3.3 Composition API setup() 函数 参数

在父子组件传参中，会使用到如下两个参数

• props

• context

import { reactive , computed, toRefs, watch} from ‘vue’

export default {

name: ‘App’,

// setup 参数

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】