开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

现在我们来看看vue3的script部分，vue3其实支持2种写法，分别是与vue2一样的Options写法与新增的Composition写法，今天我们就来分别看看这两种写法。

Options写法

Options的意思就是选项，我们可以把一个组件的的各种选项写好，比如最常用的data,methods等

export default {
    name:'xxx',
    props:{},
    setup(){},
    data(){
        return {}
    },
    methods:{},
    mounted(){},
}

与vue2不同，vue3引入了一个新的生命周期setup,其实这个生命周期寓意是建立，链接。在这个生命周期里，你可以用所有的API，甚至可以书写别的生命周期，因此可以称之为万能生命周期，这一点，我们将在下一条里详解。

script setup与 Composition

其实在上面的声明周期里，setup里写的就是Composition，但我之所以把这个独立出来做为一个标题,是因为在vue3.2支持了script setup,在单文件组件里，我们给script标签加上setup.

<script setup>
 // 你的逻辑，composition api
</script>

-- 编译后--
<script>
    export default {
      setup(){
          // 你的逻辑，
          // 自动return
      }
    }
</script>

因此我们写Composition就可以减少很多代码，目前vue3文档也同时支持这2种写法，大家可以相互印证。

我们看一下在script setup中如何实现与Options API相同的功能

name

name指的是组件的名字，遗憾的是，在script setup中并没有相应的方案，虽然社区之中也有一些插件，但我试用只会感觉都差点意思。

我个人建议，如果你确实需要定义name,可以再写一个普通的script,而vue会自动合并,就是和下面这样

<script setup>
 // composition api
</script>

<script>
    export default {
        name:'xxxx'
    }
</script>

其实如果你不定义name,vue3默认会以文件名作为name，也是一样的

data 所谓的data其实就是响应式数据，vue3已经把这块剥离出来了作为一个单独的包，vue/@reactivity。我们都知道vue3的响应式是基于proxy的，但是由于proxy不能代理基本类型，因此vue3的响应式ap可以大致分为2类：
1. ref 响应基本类型，如string,boolean等
2. reactive 响应引用类型，如object,array等等

因此，我们直接使用这两个api就行了

const a = ref('')
const b = reactive({})

注意，这里最好用const，为什么咱们下一章讲

props

props即是参数，是父传子传过来的。在script setup我需要借助一个函数，defineProps,它的参数与你使用Options API时一样。

const props = defineProps([''])

同时，这个函数无须引用，它是在编译时的时候使用的，它的返回值是一个只读的reactive，因此不能修改，这块vue2,vue3都是一样的。

computed、watch等等

computed 中文即计算属性，其实是对一个响应式值的再封装，也是我现在项目中使用最多的api。在script setup中使用都很简单，直接引入即可。

const c = computed(()=>a.value+'1')

同理，watch等等这些API都是可以这样直接使用的。

methods 所谓methods，就是你只需的逻辑，事件处理函数等等，在script setup中你直接定义一个函数就可以了，由于setup的时候没有this，我建议你使用箭头函数，避免出现this

const handleClick = ()=>{}

生命周期 vue3中，生命周期也都进行了封装，直接引用即可。而已你使用的位置不影响函数执行的次序。

onMounted(()=>{
    
})

简单的说，你把这个onMounted写在代码的第一行，还是最后一行，它最后都还是在挂载dom时执行。

vue3就应该这样学-7

Options写法

script setup与 Composition