可以把 setup 语法糖理解为是使用组合式 API 的地方。
setup
选项是一个接收 props
和 context
的函数,
接收一个props
和context
函数并且将setup
内的内容通过return
暴露给组件的其余部分。
注意
在setup 中:
- 组件自动注册,不需要额外声明(自动将文件名定义)
- 不再声明 beforeCreate 和 create
- 无法使用 this (所以找不到组件实例无法获取到data、methods等)
- 属性方法不需要 return
组合式 API 可以提高代码的复用性与可读性,使项目更易维护,其中包括:
- 响应式 API: 比如
ref()
和reactive()
- 生命周期钩子: 比如
onMounted()
和onUnmounted()
- 依赖注入:比如
provide()
和inject()
- 父子组件之间的交互:
defineProps
和defineEmits
、defineExpose
由于在执行 setup函数的时候,还没有执行 Created 生命周期方法,所以在 setup 函数中,无法使用 data 和 methods 的变量和方法
由于我们不能在 setup函数中使用 data 和 methods,所以 Vue 为了避免我们错误的使用,直接将 setup函数中的this 修改成了 undefined
引入
在页面中,组件API按需引入:
import { ref, watch, toRefs, reactive,toRef, computed, defineEmits } from 'vue';
定义响应式数据
ref 与 reactive
在 setup 中,数据并不是响应式的,所以需要使用 ref 或者 reactive 对数据进行处理,也就是创建响应式数据。