![]UWOD(KIB9LJS9~S[T{QHM9.png](https://ucc.alicdn.com/pic/developer-ecology/24d73ada0c744f86bcfae7ec877022a2.png?x-oss-process=image/resize,w_1400/format,webp "]UWOD(KIB9LJS9~S[T{QHM9.png")
前言
在上一篇的文章中，我们了解了vue的toRef和setup的context参数，本章节中将会用前面几个章节中学到的compositionAPI知识点开发一个TodoList。
✋🏻 在做TodoList之前，我们要回顾一下以前用vue基础知识写的一个TodoList案例，通过input输入值之后，循环list显示出添加的值。
定义input
使用前面文章中学过的ref方法定义一个字符串，然后和input中的value进行双向数据绑定.
<script> const app = Vue.createApp({ setup(){ const { ref } = Vue const inputValue = ref('123') return { inputValue } }, template: ` <div> <input :value="inputValue" /> <button>提交</button> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
为了更加直观的感受input双向绑定的方式，我们可以在input标签上添加一个input事件，然后在input标签下面添加一个div标签输出input的值。
const app = Vue.createApp({ setup(){ const { ref } = Vue const inputValue = ref('123') const handleInputValueChange = (e) => { inputValue.value = e.target.value } return { inputValue, handleInputValueChange } }, template: ` <div> <input :value="inputValue" @input="handleInputValueChange" /> <div>{{inputValue}}</div> <button>提交</button> </div> ` }); 复制代码
- 在
input标签中定义了一个input事件，并在setup函数中调用这个事件方法，事件方法接收一个event，通过event就可以获取到input的值，然后将inputValue的value值修改成event中的值即可。
📢 此处使用到的双向数据绑定方法和修改数据值的方法，都是在前面文章中学习过的ref的用法。不了解的可以去前面文章中回顾一下哦~
![27YI5%2]AP6$9R6~2N9%L]1.png](https://ucc.alicdn.com/pic/developer-ecology/2842dfdc24c44be3b80333db7f93cea0.png?x-oss-process=image/resize,w_1400/format,webp "27YI5%2]AP6$9R6~2N9%L]1.png")
定义list
input标签已经实现了双向数据绑定，那么这个时候我们就需要将绑定的数据值push到list中，并循环显示出来。
<script> const app = Vue.createApp({ setup(){ // 此处定义input相关 const { ref } = Vue const inputValue = ref('') const handleInputValueChange = (e) => { inputValue.value = e.target.value } // 此处定义list相关 const { reactive } = Vue const list = reactive([]) const handleSubmit = () => { list.push(inputValue.value) } // 将上面定义的值和方法都返回给外部 return { inputValue, handleInputValueChange, list, 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> 复制代码
- 由于
list是一个数组形式的，所以需要使用之前文章中学过的reactive来定义数据值。
- 给按钮绑定一个点击事件，点击之后触发的方法里面将
ref定义的inputValue中的value添加到list中。
- 并将
list和点击事件函数都返回给外部。
封装
通过完整的代码可以发现，我们将所有的值和逻辑都写在了setup中进行return，这样写的代码不够美观的同时亦不便后期维护。所以我们要将setup里面的代码进行拆分和封装。
list
首先我们对list进行拆分和封装，在封装的时候定义了一个新的方法addItemToList，这个方法接收外部传入的参数，将参数push到list中，最后将list和addItemToList方法都返回给外部。
const listRelativeEffect = () => { const { reactive } = Vue const list = reactive([]) const addItemToList = (item) => { list.push(item) } return{ list, addItemToList } } 复制代码
input
然后对input进行拆分和封装，封装的内容和之前没什么区别，都是使用ref定义inputValue，然后将event中的值给到inputValue进行修改。
const inputRelativeEffect = () => { const { ref } = Vue const inputValue = ref('') const handleInputValueChange = (e) => { inputValue.value = e.target.value } return { inputValue, handleInputValueChange } } 复制代码
setup
最后在setup函数中引用上面两个方法中return出来的数据和方法，并重新将这些数据和方法都return到外部。
setup(){ const {list, addItemToList} = listRelativeEffect() const {inputValue, handleInputValueChange} = inputRelativeEffect() return { inputValue, handleInputValueChange, list, addItemToList } }, 复制代码
疑问
❓ 在没有封装的时候，我们是通过按钮点击事件去调用的handleSubmit方法给list添加inputValue的。封装之后list里面的addItemToList方法需要接收一个参数进行添加，那我们该怎么去修改呢？
<button @click="() => addItemToList(inputValue)">提交</button> 复制代码
我们可以在按钮点击事件中直接写一个箭头函数，调用addItemToList方法的同时将inputValue传递过去即可实现。
![4CCK)7MAN`Y`0Q~][CN[CPY.png](https://ucc.alicdn.com/pic/developer-ecology/2665aaadbe4849c19d7d944742218e7d.png?x-oss-process=image/resize,w_1400/format,webp "4CCK)7MAN`Y`0Q~][CN[CPY.png")
总结
本篇文章主要就是用前面几篇学到的compositionAPI去开发一个TodoList案例，这个案例比较简单，也是检验之前学习成果的一个小例子，大家加油💪🏻💪🏻
