前面几篇我们介绍了 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. C#下.NET配置文件使用(二)

    app.config 与 Settings.settings 用VC#创建一个GUI程序后,就会有一个 Settings.settings 文件. 一旦我们通过VC#给它添加值后,在工程目录下会生成一 ...

  2. [NOIP2018] 旅行 题解

    明显要以 \(1\) 为起点. 原图是树 这种情况下,走路不能回头,只能用 \(dfs\) 的思路走.当然肯定每次都走较小的那棵子树,\(vector\) 存图后排序即可达到这种效果. 时间复杂度 \ ...

  3. TortoiseGit 在windows11 中使用，建议升级到 2.13.0版本以后

  4. P5355 [Ynoi Easy Round 2017] 由乃的玉米田

    莫队 + bitset + 根号分支 乘法似乎是简单的,我们可以直接莫队扫描然后枚举较小数 时间 \((n + m) \sqrt n\). 加法是一个经典 idea, 莫队套 bitset,然后利用 ...

  5. windows 稀疏文件 (sparse file) 的一个实用场景——解决 SetEndOfFile 占据磁盘空间引入的性能问题

    前言 之前写过一篇文章说明文件空洞:<[apue] 文件中的空洞>,其中提到了 windows 稀疏文件是制造空洞的一种方式,但似乎没什么用处,如果仅仅处理占用磁盘空间的场景,使用SetE ...

  6. oracle的各版本的名称

    我最早接触的是oracle的版本8那个时候是8i i是internet后来是9i然后到10,就是版本10g g是grid的意思然后是11g然后12就变成了C,就是12c c是cloud的意思然后后面的 ...

  7. java的数据类型之基本类型

    强类型语言 要求变量的使用要严格符合规定,所有变量都必须先定义后使用.如果没有按照指定要求使用变量,则该变量将报错.java就是强类型语言. java的两大数据类型 1.基本类型 2.引用类型 其中基 ...

  8. 【EasyPR】Linux安装使用EasyPR开源车牌识别系统

    [EasyPR]Linux安装使用EasyPR开源车牌识别系统 零.安装OpenCV - 3.2.0 我使用的是Kali系统,基于Debian的一个Linux发行版本. 1.配置系统的软件源(配置正确 ...

  9. nodejs读写json文件

    读json文件 'use strict'; const fs = require('fs'); let rawdata = fs.readFileSync('student.json'); let s ...

  10. chatops

    ChatOps是什么? ChatOps, 简单地说,这是一种方法,允许团队以聊天室的方式来协作和管理其基础结构.代码和数据的许多方面.通过使用聊天机器人和脚本,团队可以执行命令.查询信息,并将知识分发 ...