vue中计算属性与方法的区别简单实例演示

计算属性使用的时候是当作属性来调用的，而方法是需要调用的

计算属性会进行缓存，如果依赖不变，则直接使用缓存，而当发需要不断调用

 <div id="app">
        姓:{{firstName}} 
        <br>
        名:{{lastName}}
        <br>
        计算属性全名：{{fullName}}
        <br>
        计算属性全名：{{fullName}}
        <br>
        计算属性全名：{{fullName}}
        <br>
        方法调用获取的全民：{{getFullName()}}
        <br>
        方法调用获取的全民：{{getFullName()}}
        <br>
        方法调用获取的全民：{{getFullName()}}
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                firstName:'麦',
                lastName:'克'
            },
            computed:{
                fullName(){
                    console.log('计算属性fullName')
                    return this.firstName + this.lastName
                }
            },
            methods:{
                getFullName(){
                    console.log('方法调用fullName')
                    return this.firstName + this.lastName
                }
            }
        })
    </script>

这边看下控制台打印的结果就会发现

这里可以看出，computed属性只打印了一次，依赖缓存；而方法则会一直调用