前些章节讲了一些常用的 api 如 setup, ref, reactive, toRef ... 等, 并以一个 todoList 的小案例来体现在 vue3 中如何进行解耦逻辑, 以 setup 函数作为调度的这种后端编程思想. 其实我个人觉得没啥, 就比较符合大众的编程习惯而已啦. 本篇继续来介绍计算属性 computed 是如何在 api 中应用的.

computed 的简单使用

<!DOCTYPE html>

<html lang="en">

<head>

  <title>computed</title>

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

</head>

<body>

  <div id="root"></div>

  <script>

    // computed 计算属性

    const app = Vue.createApp({

      setup () {

        const { ref, computed } = Vue

        const count = ref(0)

        const dealClick = () => {

          count.value += 1

        }

        // 其实就是定义一个变量, 给它写上逻辑, 自动计算啦

        const countAddFive = computed(() => {

          return count.value + 5

        })

        return { count, countAddFive, dealClick }

      },

      template: `

      <div>

        <span @click="dealClick">{{count}}</span> -- {{countAddFive}}

      </div>

      `,

    })

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

  </script>

</body>

</html>

对简单的 computed 的使用流程则是:

  • 从 vue 中引入 computed
  • 定义一个属性变量 = computed(( ) => { 逻辑 })
  • return 该属性变量即可在 template 中使用啦

更复杂的一些用法, 则是能在 computed 的函数中去传入对象的操作, 如设置 get 和 set 的方法.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>computed</title>

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

</head>

<body>

  <div id="root"></div>

  <script>

    // computed 计算属性

    const app = Vue.createApp({

      setup () {

        const { ref, computed } = Vue

        const count = ref(0)

        const dealClick = () => {

          count.value += 1

        }

        // 传入一个对象, 编写 get 和 set 的方法

        let countAddFive = computed({

          get: () => {

            return count.value + 5

          },

          set: () => {

            count.value = 666

          }

        })

        setTimeout(() => {

          countAddFive.value = 111

        }, 3000);

        return { count, countAddFive, dealClick }

      },

      template: `

      <div>

        <span @click="dealClick">{{count}}</span> -- {{countAddFive}}

      </div>

      `,

    })

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

  </script>

</body>

</html>

set 方法当值发生变化时候就会自动调用, 然后 get 方法则再进行处理啦. 总之在这个 computed 的使用, 在通过 api 的方式也是非常简单的, 这里就不在探索啦, 咱只要知道它的基本使用流程就行, 在实际应用中还是能用到的, 比如算根据单价和数量, 自动算营业额呀, 算打分呀这些场景, 用 computed 则会让 code 看起来非常清晰和优雅呢.

vue3 基础-API-computed的更多相关文章

  1. Vue3全局APi解析-源码学习

    本文章共5314字,预计阅读时间5-15分钟. 前言 不知不觉Vue-next的版本已经来到了3.1.2,最近对照着源码学习Vue3的全局Api,边学习边整理了下来,希望可以和大家一起进步. 我们以官 ...

  2. vue3组合式API

    vue3组合式API 为什么要用组合式API,我们来看看它是如何解决vue2的局限性的 1.vue2的局限性 当组件内容越来越多,逻辑越来越复杂,可读性就会降低,并且难以维护. vue2组件采用配置式 ...

  3. vue3组合式API介绍

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

  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. 动态编译 Java 的神器 Liquor v1.3.10 发布

    Liquor 是一个开源的轻量级 Java 动态编译器(零依赖,40KB),它可以在运行时编译 Java 字符串代码片段.类.方法等. 源码地址:https://gitee.com/noear/liq ...

  2. SWD下载口的端口状态

    1.关于SWD SWD下载口的端口状态:SWD为上拉,SWC为下拉. SWD是MCU下载程序和调试的端口,分为四线制和五线制 四线制:VCC GND SWDIO SWCKL 五线制:VCC GND S ...

  3. 基于Openframeworks调取摄像头方式的定时抓拍保存图像方法小结

    这次是采用Openframeworks来调取摄像头画面并抓图保存. 开始 借向导自动生成代码,因为要调取摄像头设备,因此增添ofVideoGrabber对象声明,又因为保存需求,所以还需添加ofPix ...

  4. 【vulhub】redis CVE-2022-0543（redis沙盒逃逸）

    渗透环境 攻击机:   IP: 192.168.66.130(Kali) 漏洞收录于:vulhub/redis/CVE-2022-0543 涉及知识点:redis沙盒逃逸 漏洞详情 受影响的系统: 仅 ...

  5. postman 如何比较两台电脑的脚本是否一样

  6. Vue3组合式API终极指南：从原理到实战，彻底掌握高效开发！

    前言 在Vue3从发布到今天,组合式API已成为现代前端开发的标杆设计模式.本文通过真实项目场景,深度解析组合式API的核心特性,配以完整代码示例,助你彻底掌握企业级Vue应用开发精髓. 一.为什么组 ...

  7. ohpm : 无法将“ohpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

    ohpm : 无法将"ohpm"项识别为 cmdlet.函数.脚本文件或可运行程序的名称. 造成该问题有两个: 没有配置好 ohpm 的环境变量. 没有配置好 PowerShell ...

  8. Linux升级openssl、openssh

      在项目中,我们经常会发现Linux系统中Open SSH.Open SSL存在高危漏洞,如OpenSSL"心脏出血"漏洞,利用该漏洞,黑客可以获取约30%的https开头网址的 ...

  9. Centos7 虚拟机挂载未分配的空间

    客户给分配了一台虚拟机,系统安装是Centos7系统,空间为80G,df -h 命令查看系统后发现只有40G左右的空间可用,剩余空间未分配.下面记录主要过程: 查看当前已分配的空间 df -h [ro ...

  10. 实现领域驱动设计 - 使用ABP框架 - 应用程序服务

    应用程序服务 应用程序服务是一种无状态的服务,它实现应用程序的用例.应用程序服务通常获取和返回dto.它由表示层使用.它使用并协调领域对象(实体.存储库等)来实现用例 应用程序服务的常见原则如下: 实 ...