vue3 学习笔记 (四)——vue3 setup() 高级用法

export default{

setup(){

const num = ref(1)

return{

num,

add(){

num.value++

},

reduce(){

num.value–

}

}

}

}

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”>点我

this.$options.setup() 返回的是一个大对象，该对象内包含了 setup 内的所有属性和方法。

三、setup 参数

---

使用setup 时，它将接收两个参数：props 和 context 。

3.1、props

第一个参数是 props ，表示父组件给子组件传值，props 是响应式的，当传入新的 props 时，自动更新。

示例7：

export default{

props: {

msg: String,

ans: String,

},

setup(props,context){

console.log(props);//Proxy {msg: “着急找对象”, ans: “你有对象吗？”}

},

}

因为 props 是响应式的，不能使用 ES6 解构，会消除prop的响应特性，此时需要借用 toRefs 解构。示例8：

import { toRefs } from “vue”;

export default{

props: {

msg: String,

ans: String,

},

setup(props,context){

console.log(props);

const { msg，ans } = toRefs(props)

console.log(msg.value); //着急找对象

console.log(ans.value); //你有对象吗？

},

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

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

开发知识点，真正体系化！**

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-irqfo2H6-1712004709819)]

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

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