前面几篇我们介绍了 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. stay：将代码翻译为Gif动图，妈妈再也不用担心我调试找不到bug了

    本文首发于微信公众号:呼哧好大枫.原作者与本文作者是同一人. 平常在做算法题或者是 debug 的时候很需要一款能够实时地将代码执行逻辑和数据以图形化的形式渲染出来的工具.之前尝试了几款(visual ...

  2. linux的使用（3）

    1.tar 包 压缩和解压 (1)tar -cvf 打包 (2)tar -xvf 解压压缩包 图片 (3)tar.gz 打包 案例:tar -zcvf ys.tar.gz aa bb hh tt (4 ...

  3. PowerJob：一款强大且开源的分布式调度与计算框架

      项目名称:PowerJob 项目作者:假诗人 开源许可协议:Apache-2.0 项目地址:https://gitee.com/KFCFans/PowerJob 项目简介 PowerJob(原Oh ...

  4. Blazor Hybrid适配到HarmonyOS系统

    1. 前言 Blazor Hybrid是一个基于Web技术的MVVM开发模式的客户端框架,它只有UI是由Webview渲染,而逻辑均由.NET开发,可以突破浏览器限制访问本地文件,或者发起TCP或者U ...

  5. day1-简介与下载

    为什么创造了golang? 计算机硬件技术更新频繁,不能合理运用多核多CPU的的优势 目前市场缺乏一款简洁高效的编程语言 c++.c运行速度很快,但存在内存泄漏的问题 go语言特点 既做到了静态语言的 ...

  6. FormCreate设计器v5.6发布—AI加持的低代码表单设计器正式上线！

    近期DeepSeek可谓是刷遍全网,当然,在DeepSeek等AI技术的推动下,人工智能正以惊人的速度改变着各行各业.AI不仅是一种技术趋势,更是未来生产力的核心驱动力. 如今,FormCreate设 ...

  7. @SpringBootApplication自动配置原理

    @EnableAutoConfiguration 是核心,他会调用一个@Import注解.我们已知Import自动配置得实现是通过创建ImportSelector 接口的实现类并重写里面selectI ...

  8. wxformbuilder 如何生成python 代码

    ?问题 正常通过F8->F6 ,我执行这两步操作后如下图,以.fbp格式显示,没生成文件 解决方案 object properties 下勾选python 效果图:

  9. 痞子衡嵌入式：记录为i.MXRT1060更换较大容量Flash(IS25LP064A_IS25LP128F)导致二级App异常启动问题解决全过程(上篇)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是为i.MXRT1060更换较大容量Flash导致二级App异常启动问题. 痞子衡最近在支持一个 RT1062 国外客户项目,客户在项目预 ...

  10. Docker镜像介绍

    一.Docker镜像介绍 镜像是Docker的三大核心概念之一. Docker运行容器前需要本地存在对应的镜像,如果镜像不存在本地,Docker会尝试先从默认的镜像仓库下载(默认使用Docker Hu ...