使用 Composition API 開發TodoList · vue筆記

[TOC] >[success] # 使用 Composition API 開發TodoList 下面用 **composition API** 實現了一個 **TodoList** 效果 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用 Composition API 開發TodoList</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ setup(){ const { ref, reactive } = Vue const inputValue = ref('') const list = reactive([]) const handleInputValueChange = (e) => { inputValue.value = e.target.value } const handleSubmit = () => { list.push(inputValue.value) } return { list, inputValue, handleSubmit, handleInputValueChange } }, template: ` <div> <input :value="inputValue" @input="handleInputValueChange"/> <button @click="handleSubmit">提交</button> <ul> <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> </div> `, }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 封裝TodoList 上面的寫法雖然是完成了功能，但是 **代碼零散**，其實我們可以做一個 **封裝** ，把 **邏輯相同的代碼進行歸類封裝** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用 Composition API 開發TodoList</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 關于 list 操作的內容進行了封裝 const listRelativeEffect = () => { const { reactive } = Vue const list = reactive([]) const addItemToList = (item) => { list.push(item) } return { list, addItemToList } } // 關于 inputValue 操作的內容進行了封裝 const inputRelativeEffect = () => { const { ref } = Vue const inputValue = ref('') const handleInputValueChange = (e) => { inputValue.value = e.target.value } return { inputValue, handleInputValueChange } } const app = Vue.createApp({ setup(){ // 流程調度中轉 const { list, addItemToList } = listRelativeEffect() const { inputValue, handleInputValueChange } = inputRelativeEffect() return { list, addItemToList, inputValue, handleInputValueChange } }, template: ` <div> <input :value="inputValue" @input="handleInputValueChange"/> <button @click="() => addItemToList(inputValue)">提交</button> <ul> <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> </div> `, }) const vm = app.mount('#root') </script> </html> ~~~ 上面的代碼中，我們把對 **list 操作的相關邏輯進行了封裝** ， **input 相關的邏輯也進行了封裝** ，代碼中的 **addItemToList** 用 **箭頭函數處理邏輯** ，如果覺得不太好懂，也可以像下面這樣封裝一個函數 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用 Composition API 開發TodoList</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 關于 list 操作的內容進行了封裝 const listRelativeEffect = () => { const { reactive } = Vue const list = reactive([]) const addItemToList = (item) => { list.push(item) } return { list, addItemToList } } // 關于 inputValue 操作的內容進行了封裝 const inputRelativeEffect = () => { const { ref } = Vue const inputValue = ref('') const handleInputValueChange = (e) => { inputValue.value = e.target.value } return { inputValue, handleInputValueChange } } const app = Vue.createApp({ setup(){ // 流程調度中轉 const { list, addItemToList } = listRelativeEffect() const { inputValue, handleInputValueChange } = inputRelativeEffect() const handleSubmit = () => { addItemToList(inputValue.value) } return { list, addItemToList, inputValue, handleInputValueChange, handleSubmit } }, template: ` <div> <input :value="inputValue" @input="handleInputValueChange"/> <button @click="handleSubmit">提交</button> <ul> <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> </div> `, }) const vm = app.mount('#root') </script> </html> ~~~ 但是還是 **建議使用箭頭函數的方式，沒必要單獨封裝一個函數** 。