vue的computed复习

news2024/10/6 14:32:55

1.复杂 data 的处理方式

三个案例：
 案例一：我们有两个变量： firstName 和 lastName ，希望它们拼接之后在界面上显示；


 案例二：我们有一个分数： score
 当 score 大于 60 的时候，在界面上显示及格；
 当 score 小于 60 的时候，在界面上显示不及格；


 案例三：我们有一个变量 message ，记录一段文字：比如 Hello World
 某些情况下我们是直接显示这段文字；
 某些情况下我们需要对这段文字进行反转；


 我们可以有三种实现思路：
 思路一：在模板语法中直接使用表达式；
 思路二：使用 method 对逻辑进行抽取；
 思路三：使用计算属性 computed ；

法1:万物都扔mustache

 缺点一：模板中存在大量的复杂逻辑，不便于维护（模板中表达式的初衷是用于简单的计算）；
 缺点二：当有多次一样的逻辑时，存在重复的代码；
 缺点三：多次使用的时候，很多运算也需要多次执行，没有缓存；

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 
  <div id="app">
    <!-- 插值语法表达式直接进行拼接 -->
    <!-- 1.拼接名字 -->
    <h2>{{ firstName + " " + lastName }}</h2>
    <h2>{{ firstName + " " + lastName }}</h2>
    <h2>{{ firstName + " " + lastName }}</h2>
 
    <!-- 2.显示分数等级 -->
    <h2>{{ score >= 60 ? '及格': '不及格' }}</h2>
 
    <!-- 3.反转单词显示文本 -->
    <h2>{{ message.split(" ").reverse().join(" ") }}</h2>
  </div>
   
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          // 1.姓名
          firstName: "kobe",
          lastName: "bryant",
 
          // 2.分数: 及格/不及格
          score: 80,
 
          // 3.一串文本: 对文本中的单词进行反转显示
          message: "my name is why"
        }
      },
    })
 
    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

法2:扔函数里面

 缺点一：我们事实上先显示的是一个结果，但是都变成了一种方法的调用；
 缺点二：多次使用方法的时候，没有缓存，也需要多次计算；

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 
  <div id="app">
    <!-- 插值语法表达式直接进行拼接 -->
    <!-- 1.拼接名字 -->
    <h2>{{ getFullname() }}</h2>
    <h2>{{ getFullname() }}</h2>
    <h2>{{ getFullname() }}</h2>
 
    <!-- 2.显示分数等级 -->
    <h2>{{ getScoreLevel() }}</h2>
 
    <!-- 3.反转单词显示文本 -->
    <h2>{{ reverseMessage() }}</h2>
  </div>
   
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          // 1.姓名
          firstName: "kobe",
          lastName: "bryant",
 
          // 2.分数: 及格/不及格
          score: 80,
 
          // 3.一串文本: 对文本中的单词进行反转显示
          message: "my name is why"
        }
      },
      methods: {
        getFullname() {
          return this.firstName + " " + this.lastName
        },
        getScoreLevel() {
          return this.score >= 60 ? "及格": "不及格"
        },
        reverseMessage() {
          return this.message.split(" ").reverse().join(" ")
        }
      }
    })
 
    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

法3:使用computed

 注意：计算属性看起来像是一个函数，但是我们在使用的时候不需要加 () ，这个后面讲 setter 和 getter 时会讲到；
 我们会发现无论是直观上，还是效果上计算属性都是更好的选择；
 并且计算属性是有缓存的；

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 
  <div id="app">
    <!-- 插值语法表达式直接进行拼接 -->
    <!-- 1.拼接名字 -->
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>
 
    <!-- 2.显示分数等级 -->
    <h2>{{ scoreLevel }}</h2>
 
    <!-- 3.反转单词显示文本 -->
    <h2>{{ reverseMessage }}</h2>
  </div>
   
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          // 1.姓名
          firstName: "kobe",
          lastName: "bryant",
 
          // 2.分数: 及格/不及格
          score: 80,
 
          // 3.一串文本: 对文本中的单词进行反转显示
          message: "my name is why"
        }
      },
      computed: {
        // 1.计算属性默认对应的是一个函数
        fullname() {
          return this.firstName + " " + this.lastName
        },
 
        scoreLevel() {
          return this.score >= 60 ? "及格": "不及格"
        },
 
        reverseMessage() {
          return this.message.split(" ").reverse().join(" ")
        }
      }
    })
 
    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

认识计算属性 computed

 官方并没有给出直接的概念解释,而是说：对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性；
 计算属性将被混入到组件实例中
 所有 getter 和 setter 的 this 上下文自动地绑定为组件实例；

计算属性 vs methods

 在上面的实现思路中，我们会发现计算属性和 methods 的实现看起来是差别是不大的，而且我们多次提到计算属性有缓存的。
 接下来我们来看一下同一个计算多次使用，计算属性和 methods 的差异：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 1.methods -->
      <h2>{{ getFullname() }}</h2>
      <h2>{{ getFullname() }}</h2>
      <h2>{{ getFullname() }}</h2>

      <!-- 2.computed -->
      <h2>{{ fullname }}</h2>
      <h2>{{ fullname }}</h2>
      <h2>{{ fullname }}</h2>

      <!-- 修改name值 -->
      <button @click="changeLastname">修改lastname</button>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      // 1.创建app
      const app = Vue.createApp({
        // data: option api
        data() {
          return {
            firstName: "kobe",
            lastName: "bryant",
          };
        },
        methods: {
          getFullname() {
            console.log("getFullname-----");
            return this.firstName + " " + this.lastName;
          },
          changeLastname() {
            this.lastName = "why";
          },
        },
        computed: {
          fullname() {
            console.log("computed fullname-----");
            return this.firstName + " " + this.lastName;
          },
        },
      });

      // 2.挂载app
      app.mount("#app");
    </script>
  </body>
</html>

这是什么原因呢？
 这是因为计算属性会基于它们的依赖关系进行缓存；
 在数据不发生变化时，计算属性是不需要重新计算的；
 但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算；

计算属性的 setter 和 getter

 计算属性在大多数情况下，只需要一个 getter 方法即可，所以我们会将计算属性直接写成一个函数。
 但是，如果我们确实想设置计算属性的值呢？
 这个时候我们也可以给计算属性设置一个 setter 的方法；但是setter基本不用

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 
  <div id="app">
    <h2>{{ fullname }}</h2>
 
    <button @click="setFullname">设置fullname</button>
  </div>
   
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          firstname: "coder",
          lastname: "why"
        }
      },
      computed: {
        // 语法糖的写法
        // fullname() {
        //   return this.firstname + " " + this.lastname
        // },
         
        // 完整的写法:
        fullname: {
          get: function() {
            return this.firstname + " " + this.lastname
          },
          set: function(value) {
            const names = value.split(" ")
            this.firstname = names[0]
            this.lastname = names[1]
          }
        }
      },
      methods: {
        setFullname() {
          this.fullname = "kobe bryant"
        }
      }
    })
 
    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/768743.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

云拨测全面升级丨单次拨测低至 0.001 元

云拨测全面升级丨单次拨测低至 0.001 元

作者&#xff1a;少焉 随着云原生、微服务技术的发展&#xff0c;可观测需求变得越来越强烈&#xff0c;作为可观测技术的重要能力之一&#xff0c;云拨测&#xff08;Synthetics Monitor&#xff09;由于其零侵入、开箱即用、主动式监测手段&#xff0c;也受到很多用户的青睐…
阅读更多...
arcgis建筑物平均高度

arcgis建筑物平均高度

主要用到相交和属性表的汇总功能。 路网 建筑物栋 相交结果 右键&#xff0c;bh列汇总 原始块有392&#xff0c;这里只有389&#xff0c;说明有的地块没有建筑&#xff0c;所以应该将表连接到原始街区上检查是否合理&#xff0c;以及随机验证一个结果是否正确。 连接结果&…
阅读更多...
【问题总结】基于docker-compose实现nginx转发redis

【问题总结】基于docker-compose实现nginx转发redis

目录&#xff1a; 文章目录 需求简介&#xff1a;Q1: nginx的http模块和http模块有什么不同Q2: 可以都使用stream模块进行配置吗 Docker环境下如何转发1 修改docker-compose2 修改nginx.conf3 测试连接 需求简介&#xff1a; 需要在192.168.3.11的ngnix上&#xff0c;转发192.…
阅读更多...
wordpress 导入数据后 为什么总是跳转到安装页面

wordpress 导入数据后 为什么总是跳转到安装页面

在WordPress导入数据后跳转到安装页面的问题可能由以下原因引起&#xff1a; 数据库连接问题&#xff1a;在导入数据之前&#xff0c;确保您的WordPress配置文件中的数据库连接信息正确且完整。打开 wp-config.php 文件&#xff0c;确保数据库的名称、用户名、密码和主机信息是…
阅读更多...
springboot整合spring security的简单入门案例

springboot整合spring security的简单入门案例

一 工程结构 二 配置操作 2.1 pom文件配置 <!-- Spring Security依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId></dependency> 2.2 config配置 Config…
阅读更多...
vue中预览pdf

vue中预览pdf

情况一 如果后端返回的pdf地址&#xff0c;粘贴到浏览器的url框中&#xff0c;可以在浏览器中直接进行预览的&#xff0c;那么我们就用window.open&#xff0c;或 a标签&#xff0c;或iframe标签通过设置src进行预览即可 法1&#xff1a;可以直接使用window.open&#xff08;…
阅读更多...
css学习知识总结

css学习知识总结

一、css与html连接&#xff1a; 可以将css语句放在html内部&#xff0c;一般放在<head>之下&#xff0c;定义在<style>中&#xff0c;格式一般是一个“.”然后加上一个“名称”再加上一个“{}”&#xff0c;再在“{}”内部定义具体的语句。 二、调整元素 2.1 字体…
阅读更多...
网络 socket

网络 socket

文章目录 概念和 TCP、UDP 区别和 HTTP 区别 概念 为网络通信提供的接口&#xff0c;定义了应用程序如何访问网络资源、如何发送和接收数据等&#xff0c;Socket 是一个包含了IP地址和端口号的组合&#xff0c;当一个应用程序想要与另一个应用程序通信时&#xff0c;它会向特定…
阅读更多...
6.3.5 利用Wireshark进行协议分析（五）----捕获并分析ICMP报文

6.3.5 利用Wireshark进行协议分析（五）----捕获并分析ICMP报文

6.3.5 利用Wireshark进行协议分析&#xff08;五&#xff09;----捕获并分析ICMP报文 一、捕获ICMP报文 打开Wireshark&#xff0c;选择网络接口并点击开始按钮。分组列表面板不断刷新抓渠道的数据包&#xff0c;为了过滤出我们所要分析的ICMP报文&#xff0c;我们在过滤框中输…
阅读更多...
线程池学习（六）线程池状态转化

线程池学习（六）线程池状态转化

线程池状态定义 // runState is stored in the high-order bits // 线程池创建之后的初始状态&#xff0c;这种状态下可以执行任务private static final int RUNNING -1 << COUNT_BITS; // 线程池不再接收新的任务&#xff0c;但是会将队列中的任务执行完 private s…
阅读更多...
Go-新手速成-流程语句

Go-新手速成-流程语句

1if Go的if不建议写&#xff08;&#xff09;&#xff0c;over //if条件判断age : 16if age < 18 {fmt.Println("未成年")} 2for循环 Go摈弃了while和do while 循环&#xff0c;因为他做到了极简(也不要括号) 这么写可以 total : 0for i : 0; i < 100; i {…
阅读更多...
41：canvas - 下

41：canvas - 下

一、转换 转换 在canvas内&#xff0c;也可以像css一样有一些类似于css2D转换的效果 位移 语法&#xff1a;ctx.translate(x, y)注意&#xff1a;一定要在绘制&#xff08;描边或填充&#xff09;之前&#xff0c;进行位移 缩放 语法&#xff1a;ctx.scale(x, y)注意&…
阅读更多...
Servlet的过滤器

Servlet的过滤器

过滤器: 使用传统的方式需要在每个页面进行验证造成代码的冗余功能重复麻烦过滤器【统计进行验证、鉴权、日志、事务】拦截请求、过滤响应 配置一个Servlet package com.sparrow.servlet;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; im…
阅读更多...
华为鲲鹏920 aarch64 版本 Ambari HDP 下载地址

华为鲲鹏920 aarch64 版本 Ambari HDP 下载地址

声明&#xff1a;为有效缓解各位同行兄弟们的痛&#xff0c;特推出此文 本文能够适配兼容 华为鲲鹏920 aarch64 版本&#xff0c;仅限 CentOS7、openEuler20.03-LTS 操作系统 以下是详细下载地址 1、CentOS7 aarch64版本 CentOS7 aarch64 https://mirrors.huaweicloud.com/…
阅读更多...
C# 抽象类和接口详解

C# 抽象类和接口详解

参考视频链接&#xff1a;https://www.bilibili.com/video/BV13b411b7Ht?p27&vd_source10065785c7e10360d831474364e0d3e3 代码的进化与重构&#xff0c;从基本代码的讲解到逐步抽象成抽象类和接口。 文章目录 最初定义利用继承改进对方法进一步改进利用虚函数进行改进利…
阅读更多...
设计模式结合场景（1）——支付场景（策略+工厂+模板）

设计模式结合场景（1）——支付场景（策略+工厂+模板）

ps&#xff1a;以下示例仅供参考&#xff0c;设计模式只是一种思想&#xff0c;至于怎么千变万化就看大家了。 一、背景 面试官&#xff1a;你们项目的支付场景用了哪些设计模式&#xff0c;为什么要这么做&#xff1f; 二、方案 使用策略模式定义不同支付方式的具体支付策略&…
阅读更多...
[深度学习实战]基于PyTorch的深度学习实战(上)[变量、求导、损失函数、优化器]

[深度学习实战]基于PyTorch的深度学习实战(上)[变量、求导、损失函数、优化器]

目录 一、前言二、深度学习框架——PyTorch2.1 PyTorch介绍2.2 Python安装详解2.3 PyTorch安装详解 三、变量四、求导五、损失函数5.1 nn.L1Loss5.2 nn.SmoothL1Loss5.3 nn.MSELoss5.4 nn.BCELoss5.5 nn.CrossEntropyLoss5.6 nn.NLLLoss5.7 nn.NLLLoss2d 六、优化器Optim 6.1 …
阅读更多...
ARM Coresight 系列文章 8 - ARM Coresight 通过 APBIC 级联使用

ARM Coresight 系列文章 8 - ARM Coresight 通过 APBIC 级联使用

文章目录 APBIC 回顾APBIC 级联 上篇文章&#xff1a;ARM Coresight 系列文章 7 - ARM Coresight 通过 AHB-AP 访问 异构 cpu 内部 coresight 组件 APBIC 回顾 APBIC 可以连接一个或者多个APB BUS masters&#xff0c; 例如连接一个 APB-AP 组件和带有 APB 接口的 Processor&…
阅读更多...
Java源码规则引擎：jvs-rules数据扩展及函数配置说明

Java源码规则引擎：jvs-rules数据扩展及函数配置说明

jvs-rules数据拓展节点 数据拓展是数据可视化加工过程中的重要工具&#xff0c;它核心的作用是对原有数据表进行加工扩展&#xff0c;实现功能如下图所示 函数配置操作过程 操作说明 1、拖动数据拓展字段&#xff0c;并将字段拓展与之前的历史节点连接起来&#xff0c;点击数…
阅读更多...
浅谈linux前台进程与后台进程同步异步执行的理解

浅谈linux前台进程与后台进程同步异步执行的理解

最近书上看到前台进程以及后台进程的定义&#xff0c;有点令人费解。 linux终端输入一条命令&#xff0c;创建一个子进程运行这条命令&#xff0c;在这条命令进程执行完之前&#xff0c;终端shell都无法接收新的一条命令&#xff1b;只有这条命令运行结束后&#xff0c;当前终…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023