vue计算属性——computed的使用与详解

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。简单来说是一个数据, 依赖另外一些数据计算而来的结果 这时就用到了计算属性computed 例如：

//未使用计算属性
<div id="example">
  {{ message.split('').reverse().join('') }}
  var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  }
})
</div>

//使用计算属性
<div id="example">
  <p>{{ reversedMessage }}</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
//这里两种例子的输出结果一值

语法

computed: {
    "计算属性名" () {
        return "值"
    }
}

例子：求两个数的和显示在页面上

<div id="example">
   //这里的summation为计算属性名
  <p>{{ summation }}</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    num1:20,
    num:30,
  },
  computed: {
    summation(){
		return this.num1+ this.num2
	}
  }
})

计算属性缓存 vs 方法

我们可以通过在表达式中调用方法来达到同样的效果

<div id="example">
   //这里的summation为计算属性名
  <p>{{ summation() }}</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    num1:20,
    num:30,
  },
  methods: {
   summation () {
     return this.num1+ this.num2
   }
 }
})

这两种方式的结果是一致的 不同的是计算属性是基于它们的响应式依赖进行缓存的 就是说只有相关响应式依赖发生变化才会重新求值 第一次调用计算属性才会执行函数 以后多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

计算属性的getter和 setter

语法

给计算属性赋值 就需用到setter

    computed: {
        "计算属性名" (){},
        "计算属性名": {
            set(值){

            },
            get(){
                return 值
            }
        }
    }

例如

 <div id="app">
       <div>
           <span>姓名:</span>
           <input type="text" v-model="full">
       </div>
  </div>
 var vm = new Vue({
    el: "#app",
        computed:{
        full: {
            // 使用full的值触发get方法
            get(){
                return this.full = 1
            },
            // 给full赋值触发set方法
            set(val){
                console.log(val,'set被调用了')
            }
        }
    }
})
//只有代码在执行  = 1 的时候set才会被调用