3、使用script setup语法糖优化你的vue3代码

一、准备

1.1 简介

setup语法糖 一个减少重复代码的语法糖，之前setup语法糖的提案在修改阶段，现阶段已经定稿，详情看下面的语法

1.2 插件准备

如果你使用vscode编辑器，最好安装 Volar 插件，它和 Vetur 一样也会对.Vue格式的文件高亮显示，支持vue2、vue3，并且还多了在 template 中对 TypeScript 的支持，自定义组件标签高亮，以及本文要说的 setup语法糖 支持
注意来自Volar插件的提示：

Note: You need to disable Vetur to avoid conflicts.

Vetur 也是之前写 vue2 很常用的插件，但是它已经十分落后，不支持 vue3 的 setup 语法糖，会发生冲突，如果你想写 vue3 的 setup 语法糖请卸载或者禁用它，安装 Volar 足矣。

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";  //此处使用 Vetur 插件会报红
</script>

 

二、语法

2.1 组件引入

之前的写法

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWord from '@/components/HelloWord.vue';
export default defineComponent({
  name: 'Home',
  components:{
    HelloWord
  }
});
</script>

 

现在的写法

<script setup lang="ts">
import HelloWord from '@/components/HelloWord.vue'; //不用注册，引入即注册
</script>

 

2.2 定义组件的 props

<script setup lang="ts">
import { ref,defineProps } from 'vue'
type Props={
  msg:string
}
defineProps<Props>();
</script>

 

2.3 定义响应变量、函数、监听、计算属性....

<script setup lang="ts">
import { ref,computed,watchEffect } from 'vue'
const count = ref(0); //不用 return ，直接在 templete 中使用
const addCount=()=>{  //定义函数，使用同上
  count.value++;
}
const howCount=computed(()=>"现在count值为："+count.value);//定义计算属性，使用同上
watchEffect(()=>console.log(count.value)); //定义监听，使用同上
//...some code else
</script>

 

2.3 使用 await 异步

注意在vue3的源代码中，setup执行完毕，函数 getCurrentInstance 内部的有个值会释放对 currentInstance 的引用，await 语句会导致后续代码进入异步执行的情况。所以上述例子中最后一个 getCurrentInstance() 会返回 null，建议使用变量保存第一个 getCurrentInstance() 返回的引用.

三、其他

3.1 语法糖实现

vue文件代码

<template>
  <div>{{ msg }}</div>
</template>
<script setup>
  const msg = 'Hello!'
</script>

 

编译后的js代码：

export default {
  setup() {
    const msg = 'Hello!'

    return function render() {
      // has access to everything inside setup() scope
      // 在函数 setup 作用域，函数 render 能访问 setup 的一切，
      return h('div', msg)
    }
  }
}

 

注意到，即使普通变量也能作为模版被置入 template 中被编译，某些人认为这不合适，不够分离。我觉得还好，还ok

 

 

script setup是vue3中新引入的语法糖，目的是简化使用Composition API时冗长的模板代码。

例如：

 

  <script lang="ts">
    import { defineComponent, ref } from 'vue'
    import { MyButton } from '@/components'
     
    export default defineComponent({
      components: {
        MyButton
      },
      props: {
          name: String
      },
      setup() {
        const count = ref(0)
        const inc = () => count.value++
     
        return {
          count,
          inc,
        }
      },
    })
    <script>

 

可见，当我们需要引入一个components时，不仅需要在文件头部显式import进行导入，而且需要components字段加入声明。不仅如此，在setup中声明的变量如果需要被模板使用，那么需要在setup的尾部显式return返回，如果你的组件模板使用的变量不多，那么这种情况还可以勉强接受。但是当你的变量和方法逐渐增加时，每次都要在setup后进行return返回，这无疑是一件枯燥的事情，在重构代码时，你也会面临巨大挑战。

为了解决这个问题，vue3添加了script setup语法糖提案。

像上面这段代码，使用script setup语法糖重构后，将变成：

   

<script setup lang="ts">
    import { defineComponent, ref, defineProps } from 'vue'
    import { MyButton } from '@/components'
     
    defineProps<{
        name:string
    }>()
     
    const count = ref(0)
    const inc = () => count.value++
     
    <script>

 

怎么样，代码是不是变得可读性更强，更优雅了。

接下来我们看一下具体的用法。

 
基本用法

若要使用script setup语法，只需在原vue文件中的script标签加入setup属性。

 

  <script setup lang="ts">
     
    <script>

 

使用后意味着，script标签内的内容相当于原本组件声明中setup()的函数体，不过也有一定的区别。
使用setup中的参数

  

 <script setup="props, context" lang="ts">
     
    <script>

 

像这样，只要在setup处声明即可自动导入，同时也支持解构语法：

 

  <script setup="props, { emit }" lang="ts">
     
    <script>

 

 
暴露变量到模板

曾经的提案中，如果需要暴露变量到模板，需要在变量前加入export声明：

export const count = ref(0)

 

不过在新版的提案中，无需export声明，编译器会自动寻找模板中使用的变量，只需像下面这样简单的声明，即可在模板中使用该变量

const count = ref(0)

 

 
导入component或directive

直接import即可，无需额外声明

  

 import { MyButton } from "@/components"
    import { directive as clickOutside } from 'v-click-outside'

 

与原先一样，模板中也支持使用kabab-case来创建组件，如<my-button />

 
定义props，emit

  

 <script setup>
      import { defineProps, defineEmit, useContext } from 'vue'
     
      const props = defineProps({
        foo: String,
      })
      const emit = defineEmit(['change', 'delete'])
    </script>

 

增强的props类型定义：

 

  const props = defineProps<{
      foo: string
      bar?: number
    }>()
     
    const emit = defineEmit<(e: 'update' | 'delete', id: number) => void>()

 

不过注意，采用这种方法将无法使用props默认值。

 
获取 slots 和 attrs

   

<script setup lang="ts">
      import { useContext } from 'vue'
     
      const { slots, attrs } = useContext()
    </script>

 

 
await语法支持

在script setup内可以直接使用await语法：

  

 <script setup>
      const post = await fetch(`/api/post/1`).then((r) => r.json())
    </script>

 

 
定义组件其他字段

在script setup内使用export default，其内容会被处理后放入原组件声明字段。

  

 <script setup>
      export default {
        name: "MyComponent"
      }
    </script>

 

 
vscode配套插件使用

volar是一个vscode插件，用来增强vue编写体验，使用volar插件可以获得script setup语法的最佳支持。
————————————————
版权声明：本文为CSDN博主「ooooonly_real」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_17794813/article/details/117381219