vue3.0 sfc 中 setup 的变化

在vue中，sfc(单文件组件)指的是文件后缀名为.vue的特殊文件格式，它允许将 Vue 组件中的模板、逻辑 与 样式封装在单个文件中。

以下是一个基本的sfc

<script>exportdefault{data(){return{greeting:'HelloWorld!'}}}</script><template><pclass="greeting">{{greeting}}</p></template><style>.greeting{color:red;font-weight:bold;}</style>

vue3.0在最新的sfc提案中推出了setup的写法，下面让我们来看看，新的提案都有哪些变化。

标准的sfc写法

在使用TS的情况下，标准的sfc需要借助defineComponent来进行类型推断。

<scriptlang="ts">import{defineComponent}from'vue'exportdefaultdefineComponent({setup(){return{//暴露给template的属性}}})</script>

script-setup

script setup的推出，目的是为了让开发者更高效率的开发组件，减少样板内容，减轻开发负担。仅仅需要给script标签添加一个setup属性，就能将script变成setup函数，同时定义的变量，函数，导入的组件都会默认暴露给模板。

1. 变量暴露

标准的写法

<script>import{defineComponent,ref}from'vue'exportdefaultdefineComponent({setup(){constcount=ref(0)return{count}}})</script><template><div>parent{{count}}</div></template>

setup 写法

<scriptsetuplang="ts">import{ref}from'vue'constcount=ref(0)</script><template><div>parent{{count}}</div></template>

组件挂载

标准的写法

<scriptlang="ts">import{defineComponent}from'vue'importchildfrom'./childComponent'exportdefaultdefineComponent({components:{child},setup(){//...}})</script><template><div>parent<child/></div></template>

setup 写法

<scriptsetuplang="ts">importchildfrom'./childComponent'</script><template><div>parent<child/></div></template>

无需再手动挂载组件，即可在模板中使用，高效快捷。 其他的变量，以及顶级API，比如compute、watch等属性，和原来的标准写法一样。

props

在setup中，子组件在接收props时，需要借助defineProps，这是一个只能在setup语法中才能使用的API。我们先来看看标准的写法，props是如何接收的。

标准写法

//parent.vue<template><child:count={count}/></template><scriptlang="ts">impor{defineComponent,ref}from'vue'importchildfrom'./childComponent'exportdefaultdefineComponent({components:{child},setup(){constcount=ref(0)return{count}}})</script>

//child.vue<template>child{{count}}</template><scriptlang="ts">impor{defineComponent}from'vue'exportdefaultdefineComponent({props:['count'],setup(props){return{}}})</script>

setup 写法，使用defineProps

//parent.vue<template><child:count={count}/></template><scriptsetuplang="ts">impor{ref}from'vue'importchildfrom'./childComponent'constcount=ref<number>(0)</script>

//child.vue<template>child{{count}}</template><scriptsetup>defineProps(['count'])</script>

注意：使用sfc-setup语法，不需要引入defineProps

在这里我们只需要简单的声明props，写法简洁了不少。

那如何给props做类型检查呢？

<scriptlang="ts">import{defineComponent}from'vue'exportdefaultdefineComponent({setup(){return{//暴露给template的属性}}})</script>0

如何使用TS进行类型注解呢？

<scriptlang="ts">import{defineComponent}from'vue'exportdefaultdefineComponent({setup(){return{//暴露给template的属性}}})</script>1

我们发现，props没有被赋予默认值，在TS的写法中，给props设置默认值有2种方式

ES6的变量解构赋值

defineProps返回一个对象，我们可以在解构返回的对象，同时赋予默认值。

<scriptlang="ts">import{defineComponent}from'vue'exportdefaultdefineComponent({setup(){return{//暴露给template的属性}}})</script>2

withDefaults

官方后续推出了withDefaults来给props提供默认值；withDefaults会对默认值进行类型检查。

<scriptlang="ts">import{defineComponent}from'vue'exportdefaultdefineComponent({setup(){return{//暴露给template的属性}}})</script>3

自定义事件

要在setup中，使用事件，需要借助defineEmits，这也是是一个仅能在sfc-setup语法中使用的编译器宏。

<scriptlang="ts">import{defineComponent}from'vue'exportdefaultdefineComponent({setup(){return{//暴露给template的属性}}})</script>4