盘点Vue3.2语法糖的使用总结

盘点Vue3.2语法糖的使用总结

一. 概述

Vue2 时期,组件里定义的各类变量、方法、计算属性等是分别存放到 data、methods、computed 等选项里,这样编写的代码不便于后期的查阅,查找一个业务逻辑需要在各个选项来回切换。vue3.0 组合式API setup 函数的推出就是为了解决这个问题,它让我们的逻辑关注点更加集中,语法也更加精简,但是当我们在使用vue3.0的语法就构建组件的时候,总是需要把外面定义的方法变量必须要 return 出去才能在 <template> 使用。比较麻烦一些,所以 vue3.2 语法糖的出现以及一些新增的API,让我们的代码进一步简化。

什么是语法糖?

语法糖(英语:Syntactic sugar)是由英国计算机科学家彼得·兰丁发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能没有影响,但是更方便程序员使用。语法糖让程序更加简洁,有更高的可读性。

Vue3.2语法糖

来看下 vue3.0vue3.2 的单文件组件(SFC,即.vue 文件)的结构对比

vue3.0 组件

<template>
  <Hello :title="title" />
</template>

<script lang="ts">
import { ref } from 'vue';
import Hello from './components/Hello.vue'
export default {
  components: { Hello },
  setup() {
    const title = ref("Hello")
    return { title }
  }
}
</script>

vue3.2 组件

<template>
  <Hello :title="title"/>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Hello from './components/Hello.vue'
const title = ref("Hello")
</script>

对比 vue3.0vue3.2 版本的组件模板,最主要的变化是 3.2 中没有了 setup 函数,而是把它放在了 script 标签中。

我们定义的属性和方法也不用在 return 中返回,直接就可以用在模板语法中使用。这些是直观的变化,接下来我们学习具体的用法

二.使用介绍

1.组件注册

Vue3.0 中使用组件,需要使用 components 选项来显式注册:

<script>
import ComponentA from './ComponentA.js'

export default {
  components: { ComponentA },
  setup() {
    // ...
  }
}
</script>

Vue3.2<script setup> 的单文件组件中,导入的组件可以直接在模板中使用,组件会自动注册,并且无需指定当前组件的名字,它会自动以文件名为主,也就是不用再写 name 属性了。

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

2.Props 声明

Vue3.0 中,prop 可以使用 props 选项来声明

<script>
export default {
  props: ['foo'],
  // 或者用这种方式指定类型与默认值
  // props: {
  //   foo:{
  //     type: String,
  //     default: ''
  //   },
  // },
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}
</script>

Vue3.2 组件中,props 可以使用 defineProps() 来声明

<script setup>
const props = defineProps(['foo'])
// 或者
const propsOther = defineProps({
  title: String,
  likes: Number
})
</script>

注意事项: 所有的 props 都遵循着单向绑定原则,props 因父组件的更新而变化,自然地将新的状态向下流往子组件,而不会逆向传递,这意味着通过父向子组件传递的数据是个只读属性,无法在子组件中更改 props 数据。

作者:QiShare
链接:https://juejin.cn/post/7169893449498689543
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

评论区
头像