拥抱组合式API：vue3的script setup解析看这篇就够

vue3除了Composition API是一个亮点之外，尤大大又给我们带来了一个全新的玩意 —— script setup，对于setup大家相信都不陌生，而对于script setup有些同学则表示难以理解，那么从现在开始，这一篇文章将让你一看就懂。

---

ref与reactive

在setup中，我们拥有ref和reactive俩个api去创建一个响应式变量，这俩者存在的区别是ref是针对基本类型的响应，而reactive是针对引用类型的响应。

import { ref, reactive } from 'vue'

const data = ref('123')
const other = reactive({ is: '123' })

console.log(data.value)
console.log(other.is)

// 这里需要注意，reactive的对象可以直接访问，修改内部的子数据，而data需要使用.value访问修改，如下
data.value = '666'  // ok
data = '666' 				// no

other.is = '666'		// ok
other = '666'				// no

导入自定义组件

在之前的optionApi中我们使用的是components: { ... } 的方式导入自定义组件，而在现在，我们只需要直接import组件即可使用