前面几篇我们介绍了 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 函数进行调度, 逻辑数据处理则封装到外面去, 这种编程的感觉就和写口段接口是一样的, 就非常清晰易懂啦.

vue3 基础-API-案例-ToDoList的更多相关文章

  1. IO流 简介 总结 API 案例 MD

    目录 IO 流 简介 关闭流的正确方式 关闭流的封装方法 InputStream 转 String 的方式 转换流 InputStreamReader OutputStreamWriter 测试代码 ...

  2. vue3组合式API介绍

    为什么要使用Composition API? 根据官方的说法,vue3.0的变化包括性能上的改进.更小的 bundle 体积.对 TypeScript 更好的支持.用于处理大规模用例的全新 API,全 ...

  3. Coursera 机器学习课程 机器学习基础：案例研究 证书

    完成了课程1  机器学习基础:案例研究 贴个证书,继续努力完成后续的课程:

  4. Linux高性能server编程——Linux网络基础API及应用

     Linux网络编程基础API 具体介绍了socket地址意义极其API,在介绍数据读写API部分引入一个有关带外数据发送和接收的程序,最后还介绍了其它一些辅助API. socket地址API 主 ...

  5. 服务器编程入门（4）Linux网络编程基础API

      问题聚焦:     这节介绍的不仅是网络编程的几个API     更重要的是,探讨了Linux网络编程基础API与内核中TCP/IP协议族之间的关系.     这节主要介绍三个方面的内容:套接字( ...

  6. Linux 高性能服务器编程——Linux网络编程基础API

    问题聚焦:     这节介绍的不仅是网络编程的几个API     更重要的是,探讨了Linux网络编程基础API与内核中TCP/IP协议族之间的关系.     这节主要介绍三个方面的内容:套接字(so ...

  7. Android BLE与终端通信（一）——Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址

    Android BLE与终端通信(一)--Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址 Hello,工作需要,也必须开始向BLE方向学习了,公司的核心技术就是BLE终端 ...

  8. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  9. mongoose 基础api 图表整理

    一.背景 今天看 mongoose 的基础 API,参考了下面的链接做了图表以供查阅. 参考资料: http://www.cnblogs.com/xiaohuochai/p/7215067.html ...

  10. React实例入门教程(1)基础API,JSX语法--hello world

      前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...

随机推荐

  1. Springboot集成easypoi实现excel多sheet导出

    1.环境配置 <!--easypoi依赖,excel导入导出--> <dependency> <groupId>cn.afterturn</groupId&g ...

  2. 不到24小时，AOne让全员用上DeepSeek的秘诀是……

    DeepSeek引发新一轮AI浪潮,面对企业数字化智能升级与数据安全红线的急迫需求,IT负责人的压力山大!如何在24小时内实现全员AI落地,同时为后续安全部署铺平道路? Step1:一键开启全员智能时 ...

  3. SparkRDD算子（transformations算子和actions算子）

    RDD提供了两种类型的操作:transformation和action1.所有的transformation都是采用的懒策略,如果只是将transformation提交是不会执行计算的,计算只有在ac ...

  4. Vulkan环境配置 | vscode+msvc 解决方案

    Vulkan环境配置 | vscode+msvc 解决方案 前言 如果作为Windows 11侠的你是一个vscode爱好者,凑巧电脑上还安装有Visual Studio,这个时候你突然想配置一个Vu ...

  5. 机器学习 | 强化学习（4） | 无模型控制（Model-Free Control）

    无模型控制(Model-Free Control) 无模型预测概论 上一节课: 无模型预测 用于估计一个未知马尔科夫决策过程的价值函数 这节课 无模型控制 最优化一个未知马尔科夫决策过程的价值函数 一 ...

  6. 【目标检测】一、初始的R-CNN与SVM

    1.流程 为什么要用SVM而不是CNN最后一层的softmax? 取什么模型必然是有标准衡量,这个流程取得是书上[4]写的,作者说他得实验证明SVM比FC的mAP要高,所以我流程暂且这样画了. R-C ...

  7. 复杂任务分解：Tree of Thought

    像搭乐高一样玩转AI思考 今天要带大家解锁一个让AI从"单细胞生物"进化成"八爪鱼思考者"的神技--Tree of Thought(思维树).准备好了吗?我们要 ...

  8. JMeter 通过 BeanShell 脚本处理入参和回参

    入参:可以通过该方式动态生成入参参数,如时间参数,随机参数等. 操作:右键 HTTP Request - Add - Pre Processor - BeanShell PreProcessor im ...

  9. go krotos proto编译引用外部包 was not found or had errors

    前言 kratos protos 生成 pb.go 文件时,会出现引用其他 proto 文件报错 was not found or had errors,因找不到此文件而无法编译. 解决 首先我们先了 ...

  10. postman发送数组

    postman发送数组 第一种 第二种