前面几篇我们介绍了 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. mysql外部访问踩坑

    起因 项目用.Net开发,在mac上运行,可能是版本问题,想试试在windows下部署,就用parallels起了个windows,但windows却无法连接宿主mac上的mysql,最后折腾了一天才 ...

  2. WPF DevExpress GridColumn ComboBox 显示选择内容的 TooTip

    实现显示当前选择的ComboBox中项的ToolTip信息: 1. 设置 GridColumn 的 CellTemplate 为 ComboBoxEdit , 然后自定义他的 ItemContaine ...

  3. QT5笔记：24. 自定义对话框以及模态 调用

    创建窗口时 窗口对象为QDialog 调用方法为exec(); int res = setSizeDialog->exec();//模态窗口 (不必要)exec可以获取到调用的是对话框的 QDi ...

  4. PERT 图表教程

    (翻译自: PERT Chart Tutorial) PERT 图表 是(程序评估和审查技术)的首字母缩写.PERT 图是一种项目管理工具,用于在项目中安排.组织和协调任务.它基本上是一种分析完成给定 ...

  5. Typecho 如何开启外链转内链

    把博客中的外部链接转换为网站内链,据说有利于搜索引擎收录.该插件主要由 benzBrake 大佬 编写,同时支持转换文章和评论中的链接. 上传插件 下载 Master Branch Code 后上传到 ...

  6. centos使用gcc编译c++源码文件（*.cpp）

    1.检查gcc是否安装 输入g++如提示:g++: fatal error: no input files说明已经安装gcc环境 2.安装gcc环境,如已经安装略过此步骤 yum install gc ...

  7. C#之 Dictionary 详解

    基本概念 Dictionary<TKey, TValue>是C#中用于存储键值对集合的泛型类,属于System.Collections.Generic命名空间.它允许使用键(Key)来访问 ...

  8. antd vue 嵌套表格之实现每次展开一行

    在项目中遇到一个需求,就是使用嵌套子表格时,每次只展示一行,且展开一行另一行收起,直接上代码吧,顺便记录一下 这里需要注意,我们要在外层table组件添加如图三个属性,缺一不可,咳咳,不用杠我那个&l ...

  9. 赞美Syscall

    知道程序员在编写程序时直接和硬件打交道是一件非常麻烦的事,同时不受保障的程序直接运行在硬件上如果出错可能造成计算机宕机,于是可以编写一个应用程序驻留在计算机上管理硬件资源为上层应用提供系统调用(sys ...

  10. FastAPI性能优化指南：参数解析与惰性加载

    扫描二维码关注或者微信搜一搜:编程智域 前端至全栈交流与成长 探索数千个预构建的 AI 应用,开启你的下一个伟大创意 第一章:参数解析性能原理 1.1 FastAPI请求处理管线 async def ...