计算属性和methods对比

    <div id="app">
        <!-- 插值操作拼接字符串的方法尽量不用，因为语法过于复杂 -->
        <h2>{{firstName}} {{lastName}}</h2>

        <!-- 函数拼接字符串 -->
        <h2>{{getFullName()}}</h2>

        <!-- 计算属性拼接字符串 -->
        <h2>{{fullName}}</h2>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName : 'Taylor',
                lastName : 'Swift'
            },
            methods: {
                getFullName : function() {
                    return this.firstName + ' ' + this.lastName;
                }
            },
            computed: {
                fullName : function () {
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>

image.png

3种方法都能实现字符串的拼接，
第1种插值操作的方法最好不用，因为语法过于繁琐和复杂的代码不要放在html里处理
函数方法和计算属性看上去没有什么不同，但是为什么提倡使用计算属性

image.png

Vue内部对计算属性有 缓存机制，只要监测到计算属性中的值没有发生变化，即使再次调用计算属性，也是将上次缓存的结果传递出去，而methods无论其中的值有没有发生变化，只要调用一次他就执行一次。
所以，在需要转换数据的情况下，计算属性的性能比methods高。

验证：

    <div id="app">
        <!-- 插值操作拼接字符串的方法尽量不用，因为语法过于复杂 -->
        <!-- <h2>{{firstName}} {{lastName}}</h2> -->

        <!-- 函数拼接字符串 -->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>

        <!-- 计算属性拼接字符串 -->
        <!-- <h2>{{fullName}}</h2> -->
    </div>

            methods: {
                getFullName : function() {
                    console.log('getFullName()被调用了');
                    return this.firstName + ' ' + this.lastName;
                }
            }

methods执行了4次，调用了4次

image.png

    <div id="app">
        <!-- 插值操作拼接字符串的方法尽量不用，因为语法过于复杂 -->
        <!-- <h2>{{firstName}} {{lastName}}</h2> -->

        <!-- 函数拼接字符串 -->
        <!-- <h2>{{getFullName()}}</h2>
            
        <!-- 计算属性拼接字符串 -->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
    </div>

            computed: {
                fullName : function () {
                    console.log('fullName被调用了');
                    return this.firstName + ' ' + this.lastName;
                }
            }

fullName中的数据没有发生改变，由于缓存机制，即使执行了4次，也只调用了1次。

image.png

改变this.firstName的值
this.firstName一旦改变，计算属性就马上被调用

image.png