最佳答案
1. 引言
Vue3的Composition API是Vue.js框架的一個重要特點，它供給了一種新的構造組件邏輯的方法，旨在處理Options API在複雜組件中邏輯分散的成績。Composition API經由過程setup函數將相幹邏輯會合管理，進步了代碼的可讀性跟可保護性。本文將帶你深刻懂得Composition API的入門技能，並經由過程實戰案例剖析其利用。
2. Composition API核心不雅點
2.1 setup函數
setup函數是Composition API的進口點，它在組件實例創建之前被挪用。setup函數接收兩個參數：props跟context。props是轉達給組件的屬性，context包含了一些與組件相幹的方法跟屬性，如emit、slots、attrs等。
setup(props, { emit, slots, attrs }) {
// ...
}
2.2 呼應式數據
Composition API供給了ref跟reactive函數來創建呼應式數據。
ref：用於創建單個值的呼應式東西。reactive：用於創建東西範例的呼應式東西。
import { ref, reactive } from 'vue';
setup() {
const count = ref(0);
const person = reactive({ name: 'John', age: 30 });
// ...
}
2.3 打算屬性跟偵聽器
computed：用於創建打算屬性。watch：用於創建偵聽器。
import { computed, watch } from 'vue';
setup() {
const count = ref(0);
const doubledCount = computed(() => count.value * 2);
watch(count, (newVal, oldVal) => {
// ...
});
// ...
}
2.4 生命周期鉤子
Composition API供給了生命周期鉤子函數，如onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted等。
import { onBeforeMount, onMounted } from 'vue';
setup() {
onBeforeMount(() => {
// ...
});
onMounted(() => {
// ...
});
// ...
}
3. 實戰案例：構建TodoList利用
下面我們經由過程一個TodoList利用的實戰案例，展示怎樣利用Composition API來構建組件。
3.1 創建TodoItem.vue組件
<template>
<div>
<input type="checkbox" v-model="todo.completed" />
<span>{{ todo.text }}</span>
<button @click="emit('remove', todo.id)">Remove</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
props: ['todo'],
emits: ['remove'],
setup(props, { emit }) {
const todo = ref(props.todo);
function removeTodo() {
emit('remove', todo.value.id);
}
return { todo, removeTodo };
}
};
</script>
3.2 創建useTodos可復用邏輯
import { ref } from 'vue';
export function useTodos() {
const todos = ref([]);
function addTodo(text) {
todos.value.push({ text, completed: false });
}
function removeTodo(id) {
todos.value = todos.value.filter(todo => todo.id !== id);
}
return { todos, addTodo, removeTodo };
}
3.3 在組件中利用useTodos
<template>
<div>
<input v-model="newTodoText" @keyup.enter="addTodo" />
<ul>
<todo-item
v-for="todo in todos"
:key="todo.id"
:todo="todo"
@remove="removeTodo"
/>
</ul>
</div>
</template>
<script>
import { useTodos } from './useTodos';
import TodoItem from './TodoItem.vue';
export default {
components: { TodoItem },
setup() {
const { todos, addTodo, removeTodo } = useTodos();
const newTodoText = ref('');
return { todos, addTodo, removeTodo, newTodoText };
}
};
</script>
4. 總結
Composition API是Vue3的一個富強特點，它經由過程setup函數將組件邏輯會合管理，進步了代碼的可讀性跟可保護性。經由過程本文的入門技能跟實戰案例剖析，信賴你曾經對Composition API有了更深刻的懂得。在現實項目中，你可能實驗利用Composition API來構造組件邏輯，從而進步開辟效力跟代碼品質。