Vue进阶 | Vue3 setup语法糖

朝着全栈加速前进
338 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

image.png

语法糖

初次看到语法糖的人相比脑海里都会有个大大的问号，什么是语法糖？名字有点可爱...

语法糖（Syntactic sugar），也成为糖衣语法，加糖后的代码和加糖前的代码在编译后没有什么不同。

它的主要功效是：减少代码量、增加程序的可读性。

选项式 API 与组合式 API

setup语法糖可以理解为使用组合式 API 的地方，首先要了解一下选项式 API 与组合式 API。

对于使用过Vue2的开发者来说，选项式API的形式想必很熟悉了，其实选项式 API 是在组合式 API 的基础上实现的，新的setup语法糖往往搭配组合式API一起来使用。

组合式 API 可以提高代码的复用性与可读性，使项目更易维护，其中包括;

  • 响应式 API： 比如 ref() 和 reactive()
  • 生命周期钩子： 比如 onMounted() 和 onUnmounted()
  • 依赖注入：比如 provide() 和 inject()

选项式 API 具体实现如下：

image.png

组合式 API 具体实现如下：

image.png

通过对比可以看出，有了 setup 能够更简洁地使用组合式 API。

setup() 函数写法

  • 需要声明 setup() 函数，变量必须 return 出来，template 中才能使用
  • setup函数执行的时候项目还没有进行初始化(无法访问data、methods中的内容,this也无法访问),并且它替代了以前的beforeCreate()和created()
  • setup里面的数据不是响应式的，所以需要进行ref的调用，目的是将数据类型变为响应式的
  • setup() 函数是组合式 API 的入口函数
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'Home',
  components: { },
  props: {},
  setup(props) {
    const num = ref(0); // 定义变量

    const handleChange = () => { // 定义函数
      num.value ++
    }

    return {
      data,
      handleChange
    }
  }
})
</script>

setup语法糖

setup 就像是一个容器，包含了上面提及的组合式 API。

  1. 用法

直接在script标签声明setup。这种setup语法糖形式不需要再声明setup函数。setup语法糖里面的代码会被编译成setup()函数的内容。

<script lang="ts" setup>
  1. 不需要使用 defineComponent()
  2. 引入组件时，不需要Component额外声明组件（组件自动注册），属性和方法也不需要再返回，可以直接在template模板中使用。
  3. 可以与普通的script一起使用

普通的 <script>只执行一次（组件被首次引入时），<script setup>中的代码会在每次组件实例被创建的时候执行

<script>...</script>
<script setup>...</script>

Vue3 新增API

defineProps、defineEmits、defineExpose...

avatar
文章
阅读
粉丝