Vue 计算属性 computed

目录
  • 1、基础例子
  • 2、计算属性缓存 vs 方法
  • 3、计算属性的 setter

前言:

一般情况下属性都是放到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

JavaScript
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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue computed 计算属性代码实例

    什么是计算属性??? 1.在computed中,可以定义一些属性,这些属性叫做[计算属性] 2.计算属性的本质是一个方法,不过一般是将他们的名称直接当做属性使用,不会当方法调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../lib/vue-2.4.0.js"></scri

  • 深入理解Vue Computed计算属性原理

    Computed 计算属性是 Vue 中常用的一个功能,但你理解它是怎么工作的吗? 拿官网简单的例子来看一下: <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm =

  • Vue computed计算属性的使用方法

    computed computed:相当于method,返回function内return的值赋值在html的DOM上.但是多个{{}}使用了computed,computed内的function也只执行一次.仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容. computed和method的对比 <div id="example"> {{ message.split('').reverse().join('

  • vue.js计算属性computed用法实例分析

    本文实例讲述了vue.js计算属性computed用法.分享给大家供大家参考,具体如下: 需求:数据msg值为12345,我们现在需要反向显示成54321. 在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> &l

  • 详解Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件. 给个例子 /*html*/ <input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/ var ap

  • vue中计算属性(computed)、methods和watched之间的区别

    前言 本文主要给大家介绍了关于vue中计算属性(computed).methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是同样的. 不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职.只要相关依赖未改变,只会返回之前的结果,不再执行函

  • vue计算属性computed、事件、监听器watch的使用讲解

    一.计算属性(computed) <template> <div class="box"> <h1>计算属性</h1> <hr> <!-- 直接渲染得到数据 --> <p><input type="text" v-model="message"></p> <!-- 对data的数据进行简单的操作 这样有一个不好的地方就是后期对页面数据

  • Vue中计算属性computed的示例解读

    计算属性 表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题. computed原理 computed的属性reversedMessage在data中会有一个对我们不可见的cacheReversedMessage属性对应 cacheReversedMessage的值是根据其绑定的data中的message来决定的

  • vue计算属性computed的使用方法示例

    本文实例讲述了vue计算属性computed的使用方法.分享给大家供大家参考,具体如下: computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些业务逻辑代码,一定记得return <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

  • Vue 计算属性 computed

    目录 1.基础例子 2.计算属性缓存 vs 方法 3.计算属性的 setter 前言: 一般情况下属性都是放到data中的,但是有些属性可能是需要经过一些逻辑计算后才能得出来,那么我们可以把这类属性变成计算属性. 比如以下: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message

  • vue计算属性computed方法内传参方式

    目录 vue计算属性computed方法内传参 计算属性computed与method的区别 什么是计算属性? computed实例 computed与method的区别 关于传参问题 vue计算属性computed方法内传参 遇到头疼的vue计算属性传参问题 经过各种资料查找,亲测有效 index.vue <van-circle       v-model="Ratedata[index].currentRate"          color="#2462E8&qu

  • vue中计算属性computed理解说明包括vue侦听器,缓存与computed的区别

    一.计算属性(computed) 1.vue computed 说明 当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护 computed主要的作用: 分离逻辑(模板和数据分离) 缓存值 双向绑定(getter,setter) 2.语法格式 格式 computed:{ [key:

  • 关于vue中计算属性computed的详细讲解

    目录 1.定义 2.用法 3.computed的响应式依赖(缓存) 4.应用场景 附:计算属性的 getter 与 setter 总结 1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新 2.用法 一般情况下,computed默认使用的是getter属性 3.computed的响应式依赖(缓存) 1. computed的每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新.下面代码中,

  • vue计算属性时v-for处理数组时遇到的一个bug问题

    问题 bug: You may have an infinite update loop in a component render function 无限循环 1.需要处理的数组(在 ** ssq **里): bonus_code: ['01', '19', '25', '26', '27', '33', '10'] 2.计算属性 computed: ssqRed: function() { return this.ssq.bonus_code.splice(0, 6) }, ssqBlue:

  • Vue.js第三天学习笔记(计算属性computed)

    今天给大家分享下vue.js中的计算属性(computed) 示例一 computed的get属性 html: <template> <div class="input-text"> <input type="text" v-model='firstName'> <input type="text" v-model='lastName'> {{fullName}} </div> <

随机推荐