持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

前言

在上一篇的文章中，我们了解了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的用法。不了解的可以去前面文章中回顾一下哦~

定义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和点击事件函数都返回给外部。

chrome-capture (1).gif

封装

通过完整的代码可以发现，我们将所有的值和逻辑都写在了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传递过去即可实现。

chrome-capture (2).gif

总结

本篇文章主要就是用前面几篇学到的compositionAPI去开发一个TodoList案例，这个案例比较简单，也是检验之前学习成果的一个小例子，大家加油💪🏻💪🏻

【Vue3从零开始-第六章】6-4 用compositionAPI开发TodoList

前言

定义input

定义list

封装

list

input

setup

疑问

总结