Vue学习笔记（三）——比较计算属性和方法

参考文档：https://cn.vuejs.org/v2/guide/

计算属性和方法唯一的区别在于计算属性有缓存而方法没有，也就是说，只要计算属性的依赖属性没有发生变化，计算属性就不会重新计算，而方法则每次调用都会重新计算。下面用一个例子来说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="main">
    <button type="button" v-on:click="getData()">count</button>
    <br>
    <span>this is compute:{{compute}}</span>
    <br>
    <span>this is count:{{count()}}</span>
    <br>
</div>
</body>
<script>
    new Vue({
        el: '#main',
        data: {},
        computed: {
            compute: function () {
                console.log("enter compute");
                return 1;
            }
        },
        methods: {
            count: function () {
                console.log("enter method");
                return 2;
            },
            getData: function () {
                var result = this.compute + this.count();
            }
        }
    })
</script>
</html>

计算属性和方法在初始化时都会执行一次，当我们点击按钮再次调用计算属性和方法时，可以看到计算属性里的信息没有被打印而方法中的信息被打印了，这表示计算属性没有被重新计算而方法被重新计算了：
Vue学习笔记（三）——比较计算属性和方法

下面看一点官网没有提到的内容：

如果计算属性没有在任何地方被使用，即使计算属性的依赖属性发生变化，计算属性也不会重新计算，直到计算属性被使用时才会触发重新计算；但如果计算属性有被使用（可以是在页面上显示也可以是在方法中被使用），则计算属性的依赖属性发生变化后，计算属性会立刻重新计算。

对上例的代码稍作调整：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="main">
    <button type="button" v-on:click="getData()">count</button>
    <br>
    <!--<span>this is compute:{{compute}}</span>-->
    <!--<br>-->
    <span>this is count:{{count()}}</span>
    <br>
</div>
</body>
<script>
    new Vue({
        el: '#main',
        data: {
            value: 1
        },
        computed: {
            compute: function () {
                console.log("enter compute");
                return this.value;
            }
        },
        methods: {
            count: function () {
                console.log("enter method");
                return 2;
            },
            getData: function () {
                console.log("enter getData");
                this.value = 2;
                // console.log("this.compute is " + this.compute);
            }
        }
    })
</script>
</html>

此时计算属性compute依赖于value属性，且compute没有在任何地方被使用，当我们调用getData方法改变value时，可以看到计算属性里的信息没有被打印：
Vue学习笔记（三）——比较计算属性和方法

此时我们放开任意一处注释掉的代码（getData中的注释或html中的注释），再次调用getData方法改变value，可以看到计算属性里的信息被打印了（下面的截图对应放开的是getData中的注释）：
Vue学习笔记（三）——比较计算属性和方法
最后补充一点：计算属性不允许传入参数，而方法允许传入参数，在部分开发场景下，只能用方法而不能用计算属性，例如在v-for中需要对遍历的元素进行处理。