前些章节讲了一些常用的 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. Python if分支

    分支语句: 1.单分支语句 1 if 条件表达式: 2 print("如果成立怎么养怎么样") 例:让用户输入年龄,如果大于18就可以去网吧偷耳机age = int(input(& ...

  2. 基于正则化的图自编码器在推荐算法中的应用 Application of graph auto-encoders based on regularization in recommendation algorithms

    引言 看过的每一篇文章,都是对自己的提高.不积跬步无以至千里,不积小流无以成江海,积少成多,做更好的自己. 本文基于2023年4月6日发表于SCIPEERJ COMPUTER SCIENCE(PEER ...

  3. 在Linux系统下启动eclipse时遇到Eclipse 无法正常启动

    Eclipse: 无法打开显示: 出现此问题原因: 这通常表示 Eclipse 试图在没有合适显示环境的情况下启动,可能是在没有图形界面的环境(例如远程服务器或没有正确配置的 X11 转发)中运行. ...

  4. 记录一段mysql代码

    SELECT f . * , tmp.userid, tmp.cishu FROM fx_user f, ( SELECT a.id, b.userid AS userid, COUNT( * ) A ...

  5. 震惊！AI编程正在淘汰这5类人，你在其中吗？

    大家好,我是狂师. 今天在知乎上看到一个关于讨论:"人工智能大爆发,AI编程工具对程序员到底是颠覆还是辅助?'"问题,觉得蛮有意思.的确,AI编程的出现,引发了人们对于程序员职业未 ...

  6. rust学习笔记(3)

    变量 变量默认是不可变的 不能使用没有初始化的变量 作用域 变量离开作用域之后会直接释放, 无法再次使用; 在内部代码块中定义的变量会导致外部的变量被遮蔽 类型转换 部分类型可以隐式转换, 部分类型需 ...

  7. ubuntu install 下载安装包报错 subprocess installed post-installation script returned error exit status 10

    前言 在 ubuntu 环境下使用 sudo apt-get install 安装软件包时,会报错 XXX 为安装软件包 dpkg:error processing package XXX (--co ...

  8. 最新活动 ISS 国际空间站 MAI-75 SSTV活动计划于2020年8月4日至5日

    MAI-75  SSTV活动计划于2020年8月4日和5日举行 8月3日至9日这一周的最后宇航员时间表最近公布了,它显示了定于8月4日和5日进行的MAI-75活动.这是在Space X Demo-2脱 ...

  9. 使用Win32控制台实现命名管道通信

    接收端: //server //命名管道采用基于连接的可靠传输方式,只能一对一传输 #include <windows.h> #include <iostream> #defi ...

  10. 【消息利器RabbitMQ】RabbitMQ常用内容浅析

    以下是一篇关于 RabbitMQ 的博客内容,涵盖了从基础到死信队列的实现,以及 RabbitMQ 其他常用知识点的补充.内容逻辑清晰,代码完整,适合直接发布. 使用 RabbitMQ 实现消息队列与 ...