vue3.0计算属性_vue计算属性什么时候执行

vue3.0计算属性_vue计算属性什么时候执行前言一般情况下属性都是放到data中的,但是有些属性可能是需要经过一些逻辑计算后才能得出来,那么我们可以把这类属性变成计算属性。比如以下:<divid="example&quot

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

一般情况下属性都是放到data中的,但是有些属性可能是需要经过一些逻辑计算后才能得出来,那么我们可以把这类属性变成计算属性。比如以下:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。

所以,对于任何复杂逻辑,你都应当使用计算属性。
 

基础例子

<div id="app">
  <h2>总价格:{{totalPrice}}</h2>
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: "hello",
      books: [
        {name: '三国演义', price: 30},
        {name: '红楼梦', price: 40},
        {name: '西游记', price: 50},
        {name: '水浒传', price: 60},
      ],
    },
    computed: {
      // 计算属性的 getter
      totalPrice: function (){
          let result = 0;
          // `this` 指向 vm 实例
          for (let book of this.books){
            result += book.price;
          }
          return result
      }
    }
  })
</script>

结果:总价格:180

这里我们声明了一个计算属性 totalPrice。然后通过for循环计算出书的总价,像这种需要计算的属性,就写在computed中。

属性一般都有getset两个方法,get获取属性值,set设置属性值,computed中默认就是get属性,我们的vm.totalPrice是依赖于books.price,如果书本的价格发生变化,那么计算属性totalPrice也随之动态变化
 

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果:

<div id="app">
  <h2>总价格:{{getAllPrice()}}</h2>
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: "hello",
      books: [
        {name: '三国演义', price: 30},
        {name: '红楼梦', price: 40},
        {name: '西游记', price: 50},
        {name: '水浒传', price: 60},
      ],
    },
    methods: {
      getAllPrice: function () {
        let result = 0;
        // `this` 指向 vm 实例
        for (let book of this.books){
          result += book.price;
        }
        return result
      }
    },
  })
</script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 books 还没有发生改变,多次访问 totalPrice 计算属性会立即返回之前的计算结果,而不必再次执行函数。

所以说计算属性是有缓存的

我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。
 

计算属性的 setter

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter

computed: {
  totalPrice: {
    get: function () {
      let result = 0;
      // `this` 指向 vm 实例
      for (let book of this.books){
        result += book.price;
      }
      return result
    },
    set: function (newValue) {
      for (let book of this.books){
        book.price += 10
      }
    }
  }
}

这里我们添加了set方法,在运行vm.totalPrice=[...]时,setter 会被调用,随后书本的总价格也会随之变化,但是一般情况下不会使用set

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165403.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 不是单组分组函数「建议收藏」

    不是单组分组函数「建议收藏」问题:一:SELECT tablespace_name, SUM(bytes) freeFROM dba_free_space不是单组分组函数原因: 1、如果程序中使用了分组函数,则有两种情况可以使用:程序中存在group by,并指定了分组条件,这样可以将分组条件一起查询出来改为:  SELECT tablespace_name, SUM(bytes) freeFROM dba_free_spa…

  • 新视野大学英语(第三版)读写教程4答案

    新视野大学英语(第三版)读写教程4答案Unit1TextATextA.Languagefocus1.crumbled2.discern3.surpass4.shrewd5.conversion6.distort7.radiant8.Ingenious9.propositionTextA:LanguagefocusWordbuildingPractice1delicacybankruptcyac…

  • 怎么从电脑中的cmd进入mysql_在cmd中怎么进入mysql?

    怎么从电脑中的cmd进入mysql_在cmd中怎么进入mysql?在cmd中进入mysql的步骤:1、按win+r打开,输入cmd,快速打开命令行界面,然后进入cmd2、启动MySQL服务使用以下命令:netstartmyql3、进入mysql数据库输入以下命令:mysql-hlocalhost-uroot-p执行上面的命令后,会提示输入密码,输入密码后回车,当显示下面的界面时表示成功链接到了mysql数据库。3、输入”showdatabases”回…

  • Intellij IDEA快捷键大全(超详细)

    Intellij IDEA快捷键大全(超详细)IntellijIDEA快捷键大全(超详细)

  • 1146 Topological Order「建议收藏」

    1146 Topological Order「建议收藏」题目题意:在给定有向图中,对于给定查询序列是否是有向图中的一个拓扑序列,记录非法序列下标tip:模拟拓扑排序#include<iostream>#include<vector>usingnamespacestd;intin_num[1003]={0};inttemp[1003]={0};vector<int>s[1003…

  • PID算法详解[通俗易懂]

    PID算法详解[通俗易懂]PID算法是一种具有预见性的控制算法,其核心思想是:1>.PID算法不但考虑控制对象的当前状态值(现在状态),而且还考虑控制对象过去一段时间的状态值(历史状态)和最近一段时间的状态值变化(预期),由这3方面共同决定当前的输出控制信号;2>.PID控制算法的运算结果是一个数,利用这个数来控制被控对象在多种工作状态(比如加热器的多种功率,阀门的多种开度等)工作,一般输出形式为PWM,基本上满足了按需输出控制信号,根据情况随时改变输出的目的。比例控制是一种最简单的控制方式。其控制器的输出与输入误差信号成比例

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号