vue计算属性及其基本使用

有时候程序逻辑比较复杂，可能需要对一个数据进行一些计算和处理。这时候就需要计算属性了。当然由于模板语法支持表达式，所以也可以直接在{{}}中编写表达式，但是不管从可读性还是可维护的角度来说，计算属性都是更好的选择。

计算属性需要在构造Vue实例的时候传入computed属性，然后在相应的函数中处理复杂逻辑。计算属性可以向普通属性那样在视图中使用。计算属性有个优点就是惰性求值，下面的例子中，toUpper计算属性依赖于words属性，只要words不发生改变，那么多次访问toUpper不会重新出发计算，而是会使用已有的结果。只有当words发生变化时，toUpper才会相应改变。

<h1>计算属性</h1>

<div id="s3">

  <p>单词：{{words}}</p>

  <p>单词大写：{{toUpper}}</p>

</div>

<script>

  let vm3 = new Vue({

    el: '#s3',

    data: {

      words: 'I love you'

    },

    computed: {

      toUpper: function () {

        return this.words.toUpperCase()

      }

    }

  })

</script>

Vue-计算属性的使用

1.计算属性：首先它是一个属性，所以使用方式跟其他的属性没什么，就是定义的时候不同

2.定义计算属性：写法上是一个函数，这个函数的返回值就是计算属性最终的值

3.定义和使用的时候注意点：

   1.计算属性必须定义在computed节点中

   2.计算属性定义的时候必须是一个function，还必须有返回值，这个返回值就是计算属性最终的值

  3.计算属性不能当作方法被调用，注意他是一个属性

计算属性的缓存问题：

计算属性只要计算了一次，就会把结果缓存起来，以后多次使用计算属性，直接使用缓存的结果，只会计算一次，如果是计算属性依赖的属性发生改变，计算属性会重新计算一次，并且再次进行缓存

比如定义个翻转字符串案例 的计算属性(这个只能获取计算属性的值，不能设置计算属性的值)

computed:{

  reverseMsg (){   //对象方法的简写

return this.msg.split(").reverse().join(")

}

或者

computed: {

  total: function () {

    // 把this.list中所有的价格加起来

    let total = 0

    this.list.forEach(item => total += +item.price)

    return total

  },

  avg () {

    return (this.total / this.list.length).toFixed(2)

  }

},

使用计算属性 ：<p>{{  reversMsg }} </p> 或者  <input v-model:"reverseMsg">

计算属性的完整写法：

 1. 计算属性默认情况下只能获取，不能修改。

2. 计算属性的完整写法

  computed: {

    full() {},

    full: {

      get() {

        return this.first + ' ' + this.last

      },

      set(value) {

           //value是放回的计算属性值

      }

    }

  }

计算属性缓存

　　计算属性的特性的确很诱人，但是如果在计算属性方法中执行大量的耗时操作，则可能会带来一些性能问题。例如，在计算属性getter中循环一个大的数组以执行很多操作，那么当频繁调用该计算属性时，就会导致大量不必要的运算。

　　在Vue.js 0.12.8版本之前，只要读取相应的计算属性，对应的getter就会重新执行。而在Vue.js 0.12.8版本中，在这方面进行了优化，即只有计算属性依赖的属性值发生了改变时才会重新执行getter。

　　这样也存在一个问题，就是只有Vue实例中被观察的数据属性发生了改变时才会重新执行getter。但是有时候计算属性依赖实时3的非观察数据属性。代码示例如下：

　　我们需要在每次访问example时都取得最新的时间而不是缓存的时间。从Vue.js 0.12.11版本开始，默认提供了缓存开关，在计算属性对象中指定cache字段来控制是否开启缓存。代码示例如下：

设置cache为false关闭缓存之后，每次直接访问vm.example时都会重新执行getter方法。

来千语创想移动应用开发平台学习更多APP开发知识：app开发，app制作，app开发源码下载，app开发框架，app制作模板等免费获取。

千语创想-专业APP开发、app定制服务商，提供一站式移动应用解决方案，满足您的各类需求，欢迎免费评估需求和获取报价。

立即免费在线制作一个APP，新手注册即送开发大礼包