vue3 基础-API-案例-ToDoList

前面几篇我们介绍了 compostion API 的一些基础用法, 如 setup, ref, reactive, toRefs, toRef, context 等. 本篇呢找了一个经典的 TodoList 小案例来进行强化和巩固最基础的 composition API 的基本使用.

最直观的就是将数据和处理逻辑都写在 setup 函数中, 最后直接 return 出来给模板调用.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>TodoList</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      setup () {
        const { ref, reactive } = Vue
        const inputValue = ref('')
        const list = reactive([])

        const dealInputChange = (e) => {
          // 同输入数据做双向绑定
          inputValue.value = e.target.value
        }

        const dealSubmit = () => {
          list.push(inputValue.value)
          inputValue.value = ''
        }

        return {
          inputValue,
          list,
          dealInputChange,
          dealSubmit
        }
      },
      template: `
      <div>
        <div>
          <input :value="inputValue" @input="dealInputChange" />
          <button @click="dealSubmit">提交</button>
        </div>
        <ul>
          <li v-for="(item, index) in list" :key="index">{{item}}</li>
        </ul>
      </div>
      `,
    })

    const vm = app.mount('#root')

  </script>
</body>

</html>

但这样写就很不直观, setup 函数将会变得更加臃肿, 但其实咱们是想将 setup 定位为一个流程调度的作用, 因此可以将数据或者逻辑给再次封装到外面去哦.

从这个例子来看, setup 就做了两件事:

  • 关于 list 数据的处理
  • 关于 inputValue 的处理

因此就很清晰啦, 直接在外面再封装为两个函数即可哦.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>TodoList</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    // 1. 关于 list 的操作进行封装
    const aboutListEffect = () => {
      const { reactive } = Vue 
      const list = reactive([])

      const addItem = item => {
        list.push(item)
      }
      console.log(list)
      return { list, addItem }
    }

    // 2. 关于 inputValue 的操作进行封装
    const aboutInputValueEffect = () => {
      const { ref } = Vue
      const inputValue = ref('')

      const dealInputChange = (e) => {
        // 同输入数据做双向绑定
        inputValue.value = e.target.value
      }

      return { inputValue, dealInputChange }
    }

    const app = Vue.createApp({
      setup () {
        // setup 就做了一个流程调度和中转的操作
        const { list, addItem } = aboutListEffect()
        const { inputValue, dealInputChange } = aboutInputValueEffect()
        
        return {
          inputValue,
          list,
          dealInputChange,
          addItem
        }
      },
      template: `
      <div>
        <div>
          <input :value="inputValue" @input="dealInputChange" />
          <button @click="() => addItem(inputValue)">提交</button>
        </div>
        <ul>
          <li v-for="(item, index) in list" :key="index">{{item}}</li>
        </ul>
      </div>
      `,
    })

    const vm = app.mount('#root')

  </script>
</body>

</html>

则这样就是实现了模块解耦分离, 用 setup 函数进行调度, 逻辑数据处理则封装到外面去, 这种编程的感觉就和写口段接口是一样的, 就非常清晰易懂啦.

posted @ 2022-10-29 13:52  致于数据科学家的小陈  阅读(142)  评论(0)  编辑  收藏  举报