1. setup 函数
在 Vue 3.0 中，使用 setup 函数来配置组件。setup 函数会在组件创建之前被调用，并且是 Composition API 的入口。
<script>
export default {
setup() {
// 在这里配置组件
},
};
</script>
2. 响应式数据
使用 ref 和 reactive 函数创建响应式数据。
2.1 ref
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
return {
count,
};
},
};
</script>
2.2 reactive
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
message: 'Hello, Vue 3.0!',
count: 0,
});
return {
state,
};
},
};
</script>
3. 生命周期钩子
使用 onMounted、onUpdated、onBeforeUnmount 等函数来替代生命周期钩子。
<script>
import { ref, onMounted, onUpdated, onBeforeUnmount } from 'vue';
export default {
setup() {
const count = ref(0);
onMounted(() => {
console.log('Component is mounted');
});
onUpdated(() => {
console.log('Component is updated');
});
onBeforeUnmount(() => {
console.log('Component is about to be unmounted');
});
return {
count,
};
},
};
</script>
4. 计算属性
使用 computed 函数来创建计算属性。
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const squaredCount = computed(() => {
return count.value * count.value;
});
return {
count,
squaredCount,
};
},
};
</script>
5. 方法
通过直接在 setup 函数中定义方法。
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increaseCount = () => {
count.value++;
};
return {
count,
increaseCount,
};
},
};
</script>
6. 外部传递属性
通过 props 对象接收外部传递的属性。
<script>
export default {
props: ['message'],
setup(props) {
return {
message: props.message,
};
},
};
</script>
7. 组合逻辑
将逻辑进行组合，可以通过将不同的逻辑提取为函数，然后在 setup 中调用这些函数。
<script>
import { ref } from 'vue';
function useCounter() {
const count = ref(0);
const increaseCount = () => {
count.value++;
};
return {
count,
increaseCount,
};
}
export default {
setup() {
const { count, increaseCount } = useCounter();
return {
count,
increaseCount,
};
},
};
</script>
总体来说，Composition API 提供了一种更灵活、可组合的方式来组织和重用组件逻辑。通过 setup 函数，我们可以更清晰地组织组件内的代码，而不再受到选项的限制。
转载请注明出处：http://www.pingtaimeng.com/article/detail/571/Vue 3.0