Vue3 script setup 语法糖，超爽体验

简介

<script setup> 语法糖并不是新增的功能模块，它只是简化了以往的组合API（compositionApi）的必须返回（return）的写法，并且有更好的运行时性能。

在 setup 函数中：所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。

你不必担心setup语法糖的学习成本，他是组合式API的简化，并没有新增的知识点。你只需要了解一些用法和细微的不同之处，甚至比之前写setup()还要顺手！

使用方式极其简单，仅需要在 script 标签加上 setup 关键字即可。示例：

<script setup>

</script>

注：因为setup语法糖是vue3.2正式确定下来的议案，所以 vue3.2 的版本是真正适合setup语法糖的版本。

---

1. 属性和方法无需返回，直接使用

以前使用响应式数据是：

<template>
	{{msg}}
</template>

<script>
import { ref } from 'vue'
export default {
	setup () {
		const msg = ref('hello vue3');
		return {
			msg
		}
	}
}
</script>

现在使用 setup 语法糖，不需要return返回 和 setup函数，只需要全部定义在<script setup>内即可：

<template>
	{{msg}}
</template>

<script setup>
import { ref } from 'vue'
const msg = ref('hello vue3');
</script>

reactive, computed, 也一样可以使用：

<template>
	<div>{{msg}}</div>
	<div>{{obj.a}}</div>
	<div>{{sum}}</div>
</template>

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

const msg = ref('hello vue3');

const obj = reactive({
	a: 1,
	b: 2
})

const sum = computed(() => {
	return obj.a + 3;
});
</script>

---

2. 组件自动注册

在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。示例：

<template>
	<Child />
</template>

<script setup>
import Child from '@/components/Child.vue'
</script>

---

3. 组件数据传递( defineProps 和 defineEmits )

props 和 emits 在语法糖中使用 defineEmits 和 defineProps 方法来使用：

子组件 Child.vue：

<template>
	<div @click="toEmits">Child Components</div>
</template>

<!-- vue3.x中的写法 -->
<script setup>
// defineEmits,defineProps无需导入，直接使用

const props = defineProps({
	title: {
		type: String,
		default: 'default title'
	}
});
// 获取父组件传递过来的数据
console.log(props.title);


const emits = defineEmits(['getChild']);
const toEmits = () => {
	emits('getChild', 'child value') // 向父组件传递数据
}
</script>


<!-- vue2.x中的写法 -->
<script>  
import { defineComponent } from 'vue';  

export default defineComponent({  
	props: {  
		title: {  
			type: String,  
			default: 'default title'
		}
	},  
	setup(props, context) {
		// 获取父组件传递过来的数据
		console.log(props.title);
	 
		const toEmits = () => {  
			context.emit('getChild', 'child value'); // 向父组件传递数据  
		};  
	 
		return { toEmits };  
	}  
});  
</script>

父组件 Home.vue：

<template>
	<Child @getChild="getChild" :title="msg" />
</template>

<script setup>
import { ref } from 'vue'
import Child from '@/components/Child.vue'
const msg = ref('parent value')
const getChild = (e) => {
	// 接收父组件传递过来的数据
	console.log(e); // child value
}
</script>

---

4. 对外暴露属性(defineExpose)

<script setup> 的组件默认不会对外部暴露任何内部声明的属性。
如果有方法或属性要暴露出去，可以使用 defineExpose

子组件 Child.vue：

<template>
	{{msg}}
</template>

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

let msg = ref("Child Components");
let num = ref(123);

// defineExpose无需导入，直接使用
defineExpose({
	msg,
	num
});
</script>

父组件 Home.vue：

<template>
	<Child ref="child" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Child from '@/components/Child.vue'

let child = ref(null);

onMounted(() => {
	console.log(child.value.msg); // Child Components
	console.log(child.value.num); // 123
})
</script>

---

5. 获取 slots 和 attrs

context 里面包含 attrs, slots, emit 等数据方法：

• attrs：获取组件上的属性
• slots：获取 slot 插槽的节点
• emit：emit 方法（子组件向父组件传递数据）

父组件：

<template>
	<Sub subData="some other data" @subClick='subClick'>parent</Sub>
</template>

<script>
import Sub from './Sub.vue'
export default {
	setup () {

		function subClick (e) {
			console.log(e); // 接收子组件传递过来的数据
		}

		return { subClick }
	},
	components: { Sub },
}
</script>

子组件：

<template>
	<!-- 父组件向子组件传递数据 -->
	<div @click="handleClick">Child</div>
</template>

<script>
export default {
	mounted () {
        // vue2.x 获取组件上的属性
        console.log(this.$attrs.subData);  // 'some other data'
        
		// vue2.x 获取slot插槽的节点
		console.log(this.$slots);

	},
	methods: {
		// vue2.x emit方法(子组件向父组件传递数据)
		handleClick () {
			this.$emit('subClick', 'vue2.x - this is subData')
		},
	},
	setup (props, context) {
		let { attrs, slots, emit } = context;

		// vue3.x 获取组件上的属性
		console.log(attrs.subData);  // 'some other data'

		// vue3.x 获取slot插槽的节点
		console.log(slots.default());

		// vue3.x emit方法(子组件向父组件传递数据)
		function handleClick () {
			emit('subClick', 'vue3.x - this is subData');
		}

		return { handleClick }
	}
}
</script>

<script setup> 中可以通过 useContext 从上下文中获取 slots 和 attrs。

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

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

不过提案在正式通过后，废除了这个语法，被拆分成了 useAttrs 和 useSlots 。示例：

// 新
<script setup>
  import { useAttrs, useSlots } from 'vue'
  
  const slots = useSlots();
  const attrs = useAttrs();
  console.log(attrs.dataId); // 查看父组件传来的自定义属性
</script>