一,前言

1.setupvue3新增的生命周期,同时也是vue3组合式api(Composition API )的入口

2.setup的出现解决vue2之前选项配置模式(Option API)导致的逻辑块关注点分离的问题。

3.同时同reacthooks一样,可以将重复的逻辑抽取出去实现复用。

二,setup生命周期

1.在我们使用setup时,一定首先要记住setup是一个生命周期

2.setup是处于生命周期函数 beforeCreateCreated 两个钩子函数之前执行。且只执行一次

3.setup中不可以使用this来访问组件实例setup 的调用发生在 data propertycomputed propertymethods 被解析之前。

4.我们可以借助getCurrentInstancesetup中获取组件实例,等同于this

//setup中
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()
proxy.$router.push()

三,<script setup>

1.<script setup>vue3在单文件组件中引入了一种新的脚本类型。

2.是setup生命周期的语法糖

3.在一个单文件组件中只能有一个setup脚本

四,总结

1.setupvue3新增的生命周期,在 beforeCreateCreated 两个钩子函数之前执行,只执行一次,是组合式api的入口。

Logo

前往低代码交流专区

更多推荐