2024年前端最全vue3 学习笔记 (四)——vue3 setup() 高级用法，前端开发社区

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

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

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

<button @click=“add”>+

{{num}}

<button @click=“reduce”>-

观察上述示例，我们发现 num 值的处理涉及到 data 和 methods 两个选项，业务处理的比较分散，项目小了看着清晰明了，但是项目变大之后，data 和 methods会包含很多属性和方法，此时就很难分清哪个属性对应哪个方法。所以 vue3 新增 setup 写组合式API。

Vue3 的 Composition API 就是组合式api。

组合式api 就是一个功能所定义的 api 会放在一起，这样子即使项目变大，功能增大，我们能够很快找到功能相关的所有api，不像 Options API 功能分散，需要改动时，需要多处查找过程比较困难。

示例2：计数器

<button @click=“add”>+

{{num}}

<button @click=“reduce”>-

ref 是让基础数据类型具备响应式的，下篇文章具体介绍它的用法，需要的同学可以点个关注不迷路！

用一张图告诉你它们的区别：

二、setup 具体怎么用？

---

2.1、setup 什么时候执行？

setup 用来写组合式 api，从生命周期钩子函数角度分析，相当于取代了 beforeCreate 。会在 creted 之前执行。

执行之后，setup 打印结果始终在前边。

2.2、setup 数据和方法如何使用？

示例3：直接定义使用变量

{{a}}

运行后发现结果异常：

runtime-core.esm-bundler.js?5c40:6584 [Vue warn]: Property “a” was accessed during render but is not defined on instance.

提示我们访问的属性 a 并没有挂载到实例上。

setup 内部的属性和方法，必须 return 暴露出来，将属性挂载到实例上，否则没有办法使用，上述代码添加 return：

2.3、setup 内部有 this 吗？

自己在 setup 中打印下 this ，返回结果 是undefined 。说明在 setup 内部是不存在 this ，不能挂载 this 相关的东西。

2.4、setup 内钩子函数如何使用？

vue3 是可以兼容 vue2 的选项式写法，所以 钩子函数可以与 setup 并列存在，就相当于 Options API。

示例4：

export default{

setup(){

console.log(‘setup’);

},

mounted(){

console.log(‘mounted’);

}

}

vue3 新增的 setup() 函数用来写组合式 api，所以不建议这样写代码。所以需要使用 onXXX 一族的函数来注册钩子函数，注册成功之后调用时传递的是一个回调函数。

示例5：

import { onMounted } from “vue”;

export default{

setup(){

const a = 0

return{

a

},

onMounted(()=>{

console.log(“执行”);

})

}

}

注册的这些生命周期钩子函数只能在 setup 期间同步使用，因为它们依赖全局内部状态来定位当前组件实例，不在当前组件下调用函数时会抛出错误。

其他的钩子函数是一样的，根据需要引入就好了。

2.5、setup与钩子函数关系

setup 与钩子函数并列时，setup 不能调用生命周期相关函数，但生命周期可以调用 setup 相关的属性和方法。

示例6：

<button @click=“log”>点我

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

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

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。