vue中的computed

一、computed的作用

计算属性将被混入到vue实例中，所有的getter和setter的this上下文自动的绑定为vue实例，computed适用于简单的运算，子模板中放入太多的逻辑会让模板过重且难以维护,如果为计算属性使用了箭头函数，则this不会指向这个组件的实例，

 

二、computed的使用场景

1、性能开销比较大的计算属性 A需要遍历一个巨大的数组并做大量的计算。当有其他的计算属性依赖于 A。如果没有缓存，将要多次执行 A 的 getter！而计算属性中的缓存可以很好的避免多次执行。

2、当一些数据需要随着其他数据变动而变动时

 

三、demo使用

<template>
  <div id="example">
</div>
</template>
<script>
import Vue from "vue";
// 实例一
var vm = new Vue({
  //new vue的作用是新建vue实例
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2;
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1;
      },
      set: function (v) {
        this.a = v - 1;
      },
    },
  },
});
console.log(vm.aDouble);  //2
console.log(vm.aPlus); // => 2
vm.aPlus = 4; //设定v=4
console.log(vm.a); // => 3
console.log(vm.aDouble); // => 6





export default {

};
</script>

 

 

 

 

实例二

<template>
  <div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<script>

// 示例二
export default {
  name: "computed",
  data() {
    return {
    message:'hello' 
    };
  },
  computed:{
      reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
};
</script>

四、computed的使用体验

1、computed中的值始终取决于原始data中的值，当data中的属性值发生变化的时候，computed中所依赖的值也会发生变化

2、computed中会有缓存，当data中的属性还没有发生变化，多次访问computed中的缓存值。

3、计算属性是基于它们的响应式依赖进行缓存的，只在相关依赖发生变化的时候才会重新计算（PS:方法和属性计算的结果相同，但是方法需要每次重新渲染时，调用方法总会再次执行函数）

4、计算属性默认只有getter，不过也可根据需要设置setter