许久未更新了，分享下近期项目中的实例，本节中，我们将尝试使用 Vue3 中的 setup 语法糖来将组合式 api 简化使用；
1、setup 语法糖与传统 composition API（组合式api）的区别：
// 在原始的 script 标签上附加上 setup
<script setup>
2、自定义组件自动注册
// 旧，我们需要在export default 中的 components 中定义引入的组件。
<template lang="pug">
div.app_composition.p3
mySubComp
</template>
<script>
import mySubComp from './sub.vue';
export default {
components: { mySubComp },
setup(props, { attrs, emit, expose, slots }) {
return {};
}
};
</script>
在 setup 语法中，我们自定义的组件，或者是全局的组件都是直接在 template 直接只用：
// setup 语法
<template lang="pug">
div.app_composition.p3
mySubComp
</template>
<script setup>
import mySubComp from './sub.vue';
</script>
3、属性和方法在 template 中直接使用，无需 return 返回
// 旧，在这当中，我们定义的属性，方法需要在 return 中返回暴露给 template
<template lang="pug">
div.app_composition_sub
div 这是子组件
div {{count}}
div(@click="handler") 点击 +1
</template>
<script>
import { ref } from 'vue';
export default {
setup(props, { attrs, emit, slots, expose }) {
const count = ref(1);
const handler = () => {
count.value++;
};
return {
count,
handler
};
}
};
</script>
在 setup 语法中，我们自定义的属性及处理方法在 template 直接只用：
// setup 语法
<template lang="pug">
div.app_composition_sub
div 这是子组件
div {{count}}
div(@click="handler") 点击 +1
</template>
<script setup>
import { ref } from 'vue';
const count = ref(1);
const handler = () => {
count.value++;
};
</script>
4、关系组件间的数据传递（props、emits）
// 旧
<template lang="pug">
div.app_composition_sub
div 这是子组件
div props的值为：{{initValue}}
div(@click="handler") 发送事件
</template>
<script>
export default {
props: {
initValue: {
type: String,
default: () => {
return '';
}
}
},
emits: ['on-change'],
setup(props, { attrs, emit, slots, expose }) {
const handler = () => {
emit('on-change', 123);
};
return { handler };
}
};
</script>
在 setup 语法中，我们将使用 defineProps 指定当前 props 类型，获取实例中的 props 对象；使用 defineEmits 定义当前组件中的事件，并通过定义变量的方式来保存返回的实例，再去使用 emit：
// setup 语法
<template lang="pug">
div.app_composition_sub
div 这是子组件
div props的值为：{{initValue}}
div(@click="handler") 发送事件
</template>
<script setup>
const cProps = defineProps({
initValue: {
type: String,
default: () => {
return '';
}
}
});
const cEmits = defineEmits(['on-change']);
const handler = () => {
cEmits('on-change', 123);
};
</script>
注意：defineProps 和 defineEmits 可以在 setup 语法中不引用直接使用。
5、获取实例中的 attrs 和 slots
// setup 语法
<template lang="pug">
div.app_composition_sub
div 这是子组件
</template>
<script setup>
import { onMounted, useAttrs, useSlots } from 'vue';
onMounted(() => {
const cAttrs = useAttrs();
const cSlots = useSlots();
});
</script>
6、defineExpose 对外暴露当前实例中的属性及方法
在 Vue2 和传统的组合式 api 中，我们要么是直接使用 this.$refs.组件ref.属性值 或者 this.$refs.组件ref.方法名来访问组件中的属性值或调用方法。但是在 setup 语法中就不能在使用了，setup 的语法结构形似一个闭包，只有组件中的视图层（template）能直接访问，外部是访问不到的，那么这里我们就需要使用 defineExopse 来处理了：
<template lang="pug">
div.app_composition_sub
div 这是子组件
</template>
<script setup>
import { ref } from 'vue';
const subVal = ref('sub');
const subFunc = () => {
return subVal.value;
};
defineExpose({
subVal,
subFunc
});
</script>
注意：defineExopse 可以在 setup 语法中不引用直接使用。
ps：你之所以会愤怒，大概率是你对TA的期望太高了。
