Vue学习—深入剖析计算属性

一、计算属性

有些时候，我们在模板中放入了过多的逻辑，从而导致模板过重，且难以维护。例如：

<div id="app">
    {{ msg.split('').reverse().join('') }}
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '天气真好！'
        }
    });
</script>

碰到这样的情况，我们必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串，而且，一旦我们想要在模板中多次使用翻转字符串时，会更加麻烦。
所以，当我们处理复杂逻辑时，都应该使用计算属性。

1.基础用法

计算属性是Vue配置对象中的属性，使用方式如下：

<div id="app">
    {{ returnMsg }}
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '天气真好！'
        },
        computed: {
            returnMsg(){
                return this.msg.split('').reverse().join('');
            }
        }
    });
</script>

我们可以看到，returnMsg的值取决于msg的值，所以，当我们更改msg的值是，reversedMsg的值也会随之更改。

2.计算属性 vs 方法

虽然在表达式中调用方法也可以实现同样的效果，但是使用计算属性和使用方法有着本质的区别。
当使用方法时，每一次页面重新渲染，对应的方法都会重新执行一次，如：

<div id="app">
    <p>原始字符串: "{{ msg }}"</p>
    <p>翻转字符串: "{{ returnMsg() }}"</p>
    <br>
    <p>原始字符串: "{{ name }}"</p>
    <p>翻转字符串: "{{ returnName }}"</p>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '天气真好！',
            name: 'TomJerry'
        },
        methods: {
            returnMsg(){
                console.log('methods方法执行了!');
                return this.msg.split('').reverse().join('');
            }
        },
        computed: {
            returnName(){
                console.log('computed方法执行了!');
                return this.name.split('').reverse().join('');
            }
        }
    });
</script>

在上面的例子中我们可以看到，一旦更改name的值，页面会重新渲染，此刻控制台中打印出'methods方法执行了！'这串字符串，代表着returnMsg这个函数执行了，但是我们并不需要该方法执行，因为改动的数据和这个函数没有任何关系，如果这个函数内的逻辑很复杂，那么对于性能来讲，也是一种消耗。
也可以看到，当给数据msg重新赋值时，计算属性并没有执行。
所以，计算属性和方法的最本质的区别，是：计算属性是基于响应式依赖进行缓存的，计算属性的值一直存于缓存中，只要它依赖的data数据不改变，每次访问计算属性，都会立刻返回缓存的结果，而不是再次执行函数。而方法则是每次触发重新渲染，调用方法将总会再次执行函数。

那么，为什么需要缓存呢？
假如说，我们有一个计算属性A，它需要遍历一个巨大的数组并且做巨大的计算。然后我们需要使用到这个计算属性A，如果没有缓存，我们就会再次执行A的函数，这样性能开销就变得很大了。

3.深入计算属性

计算属性除了写成一个函数之外，还可以写成一个对象，对象内有两个属性，getter&setter，这两个属性皆为函数，写法如下：

const vm = new Vue({
  el: '#app',
  computed: {
    fullName: {
      getter () {
        // 一些代码
      },
      setter () {
        // 一些代码
      }
    }
  }
})

1.getter 读取

在前面，我们直接将计算属性写成了一个函数，这个函数即为getter函数。也就是说，计算属性默认只有getter。
getter的this，被自动绑定为Vue实例。

<div id="app">
    {{ fullName }}
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '天气真好！',
            name: 'TomJerry'
        },
        computed: {
            fullName: {
                get() {
                    console.log('计算属性被读取了！')
                    return this.msg.split('').reverse().join('');
                }
            }
        }
    });

2.setter 设置

可选，set函数在给计算属性重新赋值时会执行。
参数：为被重新设置的值。
setter的this，被自动绑定为Vue实例。

computed: {
    fullName: {
        get() {
            console.log('计算属性被读取了！');
            return this.msg.split('').reverse().join('');
        },
        set(newVal){
            console.log('计算属性被设置了！',newVal);
        }
    }
}

要注意，即使给计算属性赋了值，计算属性也不会改变，在重复一遍，只有当依赖的响应式属性变化了，计算属性才会重新计算。