文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue 计算属性 computed

2024-04-02 19:55

关注

前言:

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

比如以下:


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


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

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

1、基础例子


<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也随之动态变化

2、计算属性缓存 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。如果没有缓存,我们将不可避免的多次执行 Agetter!如果你不希望有缓存,请用方法来替代。

3、计算属性的 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

到此这篇关于Vue 计算属性 computed的文章就介绍到这了,更多相关Vue  computed内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯