一篇文章讲明白vue3的script setup，拥抱组合式API！

引言

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组件即可使用

<template>
	<Button>OK!</Button>
</template>

<script setup>
	import Button from 'element-ui-plus'
</script>

自定义方法

在之前的optionApi中我们使用的是在methods中写自定义方法，而这里我们直接定义一个方法或者变量，在template中直接使用即可

<template>
	<button @click="touchMe">OK!</button>
 	<button @click="touchIt">OK!</button>
</template>

<script setup>
  import { ref, reactive } from 'vue'

  const text = ref('123')

  const touchMe = () => {
    text.value = '666'
  }

  function touchIt() {
    text.value = '666'
  }
</script>

一般情况下笔者建议开发者都使用ref，因为ref适用范围更广。

全新的计算函数和watch

现在我们使用更为简单的方式实现计算函数与watch，直接引入组合式api直接干就完了！

import { ref, computed, watch } from 'vue'

const data = ref('666')

const imComputed = computed(() => {
	return data.value + 'some thing'
})

const unwatch = watch(data, () => {
	console.log('data was be changed')
})

简单直白的获取到ref组件

之前我们采用this.$ref.refName的方式去获取ref组件，在这里setup采用了更加简单便捷的方式去获取ref

<template>
	<el-table ref="elTable"></el-table>
</template>

<script setup>
	import { ref } from 'vue'

  // refName = 变量名将自动捆绑进去
  const elTable = ref(null)
  console.log(elTable.value)
</script>

获取props

之前的optionApi，我们需要先在props中定义props，然后再从this.xxx去获取，这样很容易出现重名覆盖等情况，在这里vue3则采用了defineProps去定义props，直接返回了响应对象。

<script setup>
	import { defineProps, toRefs, unref } from 'vue'

  const props = defineProps({
  	a: {
    	default: 0
    }
  })

  // 这里的a就等于从props中ref一个响应变量，需要.value操作符
  const { a } = toRefs(props)

  // 这里的a就等于从props中直接提取一个普通变量，随意更改无响应，直接访问无需.value
  const { a } = unref(props)

</script>

至此，相信开发者看完大致就了解了script setup啦，在vue3时期快点拥抱组合式api，拥抱script setup，让代码看起来更简洁点～

关于智密科技：专业开发各类Uniapp原生插件、目前交付给客户的插件已经超过100个各类插件，正在陆续整理上架并分享一切关于Uni-app的教程、资讯。

插件使用交流QQ群：755910061