vue3 之 script setup语法糖

整体结构

/*不使用script-setup语法糖*/
<script>
import { defineComponent } from "vue"
export default defineComponent({
name: 'app',
})
</script>
​
/*使用script-setup语法糖*/
<script setup>

</script>

---

引用组件的变更

/*原先*/
<template>
	<about />
</template>

<script>
	import about from './about.vue'
	import { defineComponent } from "vue"
	export default defineComponent({
	name: 'home',
	components: { about }
	})
</script>
​
/*用语法糖后*/
<template>
	<about />
</template>

<script setup>
	import about from './about.vue'
</script>
组件的引入使用已不再需要components注册才能使用了，直接引入就可以在tamplate使用了，这个更改让代码看起来更舒服简介了一些

---

变量使用的变更

/*原先*/
<template>
	count:{{count}}
	num:{{num}}
	text:{{text}}
	<el-button @click="handleClick">点击</el-button>
</template>
​
<script>
	import { reactive, toRefs, ref } from 'vue'
	export default {
		name: '',
		setup() {
			/*这里我列举了三种声明变量的方式*/
			const count = ref(1)
			const num = 2
			const state = reactive({
				text: "小黄在测试"
			})
			function handleClick(){
				count.value++
			}
			/*不使用script-srtup语法糖需要导出需要在template使用的变量和方法*/
			return { count, num, ...toRefs(state),handleClick }
		}
	}
</script>
​
/*用语法糖后*/
<template>
	count:{{count}}
	num:{{num}}
	/*这里没有使用toRefs展开变量，所以需要state.text*/
	text:{{state.text}}
	<el-button @click="handleClick">点击</el-button>
</template>
​
<script setup>
	import { reactive, ref } from 'vue'
	const count = ref(1)
	const num = 2
	const state = reactive({
		text: "小黄在测试"
	})
	function handleClick(){
		count.value++
	}
</script>
使用script setup语法糖后变量和方法已不再需要return出去才能被template使用了，减少了代码量，看起来更加的美观

---

props使用的变更

/*原先*/
/*子组件*/
<template>
	{{foo}}
</tamplate>

<script>
	import {defineComponent} from 'vue'
	export default defineComponent({
		name:'son',
		props:{
			foo:String
		}
	})
</script>
​
/*父组件*/
<template>
	<About foo="我是小黄" />
</template>

<script>
	import About from "../about/index.vue"
	import {defineComponent} from 'vue'
	export default defineComponent({
		name:'father',
		components:{About}
	})
</script>
​
/*用语法糖后*/
/*子组件*/
<template>
	{{foo}}
</tamplate>

<script setup>
	import {defineProps} from 'vue'
	const props = defineProps({
		foo:String
	})
	console.log(props) // Proxy {foo: '我是小黄'}
</script>

/*父组件*/
<template>
	<About foo="我是小黄" />
</template>

<script setup>
	import About from "../about/index.vue"
</script>

通过 defineProps 指定当前props类型的同时，获得上下文的props对象
在script中需要props[key]引用，而template中可直接调用key
用法上差异不大…

---

emit使用的变更

/*原先*/
<template>
	<el-button @click="handleClick">点击</el-button>
</template>
<script>
export default{
	setup(){
		emit:['h-update','h-delete']
	}
}
</script>
​
/*用语法糖后*/
<template>
	<el-button @click="handleClick">点击</el-button>
</template>
<script setup>
	import { defineEmits } from 'vue'
	const emit = defineEmits(['h-update', 'h-delete'])
	function handleClick(){
		emit('h-update')
		console.log(emit)
		//(event, ...args) => instance.emit(event, ...args)
	}
</script>

---

slots、attrs使用的变更

// 可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了useAttrs和useSlots
<script setup>
	import {useSlots,useAttrs} from 'vue'
	const slots = useSlots()
	const attrs = useAttrs()
	console.log(slots)//可以获取组件的插槽
	console.log(attrs)//可以获取组件的属性
</script>

// 旧标准
<script setup>
  import { useContext } from 'vue'

  const { slots, attrs } = useContext()
</script>

---

导入指令的用法

<script setup>
  import { directive as clickOutside } from 'v-click-outside'
</script>

<template>
  <div v-click-outside />
</template>

---

ref & toRefs的用法

	import {defineProps, toRefs,defineEmits,ref} from 'vue' 
	const props = defineProps({ isOpen: Boolean })
	const count = ref(1)
	const obj = ref({
		count:0
	})
	console.log(count.value)
	console.log(obj.value.count)
	const { isOpen } = toRefs(props);
	
	尽量不要混着用，reactive 和 ref 选一种，toRef 和 toRefs 选一种，不然代码会很乱。
	推荐常用 ref 和 toRefs