Vue3学习之第一节：初识setup

介绍

一个组件选项，在组件被创建之前，props 被解析之后执行。
它是组合式 API的入口。
Vue3.0中的一个新的配置项，值为一个函数。组件中所用到的：数据、方法等等，均要配置再setup中。

一、setup执行的时机

在beforeCreate之前执行一次，this 是 undefined。

注意：在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed、property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

案例测试demo：

 <template><h1>一个人的信息</h1><h3>姓名：{{ person.name }}</h3>
</template><script>
import { defineComponent, reactive } from 'vue'export default defineComponent({beforeCreate() {console.log('-----beforeCreate-----')},setup() {console.log('-----setup-----', this)let person = reactive({name: '张三',})return {person,}},
})
</script>

页面控制台打印：

二、setup 的参数

export default {setup(props, context) {// Attribute (非响应式对象，等同于 $attrs)console.log(context.attrs)// 插槽 (非响应式对象，等同于 $slots)console.log(context.slots)// 触发事件 (方法，等同于 $emit)console.log(context.emit)// 暴露公共 property (函数)console.log(context.expose)}
}

参数1. props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

注意⚠️：
setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。
但是，因为 props 是响应式的，你不能使用 ES6解构，它会消除 prop 的响应性。

参数2. context：上下文对象：
attrs：值为对象，包含：组件外部传递过来，但没有在 props 配置中声明的属性，相当于Vue2.x的this.$attrs。
slots：收到的插槽内容，相当于Vue2.x的this.$slots。
emit：分发自定义事件的函数，相当于Vue2.x的 this.$emit。
⚠️使用 emit 触发事件，注意需要注册 emits 配置项，否则会出现以下警告：

Vue3学习之第一节：初识setup相关推荐

初步使用计算机教案ppt,第一章第一节初识计算机程序（课件+教案+素材）
第一章第一节初识计算机程序(课件+教案+素材) ==================资料简介====================== 第一节初识计算机程序:28张PPT ~$第一节认识智能 ...
MySQL入门学习的第一节（SQL语句）
MySQL入门学习的第一节(SQL语句) SQL语句
初识计算机程序教学设计,粤教版 (B版)第二册下册第一节初识计算机程序教学设计及反思...
这是一份粤教版 (B版)第二册下册第一节初识计算机程序教学设计及反思,共6页. 二初识VB编程环境教学目标1.认识VB窗口与工具箱:2.了解什么是VB的对象.对象的属性等概念:3.基本掌握如何在窗 ...
Angular学习笔记第一节基本概念
1.Let do it! ####1.ng的基础概念在学习ng之前,我们只需要掌握HTML.CSS.JS即可. 简称ng.名字不错,吊! 重要的特性有了ng,我们就可以轻松的构建SPA应用,而且n ...
vue3学习笔记（ref, reactive, setup, hook...）
目录一.搭建项目二.常用的Composition API 1.ref函数(实现响应式) 2.reactive函数 3.vue2和vue3响应式的区别 4. setup参数 5.计算属性和监视 6. ...
零基础学习SQL第一节
零基础学习SQL第一大节第一节:数据库与SQL 我们身边的数据库大家都有过下面这样的经历吧? 收到曾经为自己诊治过的牙医寄来的明信片,上面写着"距上次检查已有半年,请您再来做个牙齿健康查 ...
CCSA学习笔记第一节思科安全解决方案综述
CCSA学习笔记 CCSA第二期:01思科安全解决方案综述 CCSA安全学习的目标 CCSA第二期:01思科安全解决方案综述 CCSA安全学习的目标 1.能够对思科安全的网络安全解决方案有初步认识 2 ...
第一节初识C语言（一）
C语言的学习记录第一个程序第一个程序(1) #include <stdio.h> int main() {printf("num=2");return 0; } 第 ...
C语言学习第一节——初识c语言
这篇文章回向大家简单的介绍一下c语言的基础只是,让大家对c语言有一个大概的认识: 以下是本节的介绍顺序,看不懂没关系,后面会再做详解(我所有的代码均会在vs2017上运行,如果可以请下载一个) 1:数 ...

Vue3学习之第一节：初识setup

介绍

一、setup执行的时机

二、setup 的参数

Vue3学习之第一节：初识setup相关推荐

最新文章

热门文章