(VueJs)计算属性和methods的对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>

    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            FirstName: '科比',
            LastName: '布莱恩特'
        },
        computed:{
            fullName:{
            //这里的set方法省略,即设为只读属性
                get:function () {
                    console.log('fullName');
                    return this.FirstName+' '+this.LastName
                }
            }
        },
        methods:{
            getFullName:function () {
                console.log('getFullName');
                return this.FirstName+' '+this.LastName
            }
        }
    })
</script>

</body>
</html>

执行结果:
(VueJs)计算属性和methods的对比
其中fullName调用一次,而getFullName调用了四次
计算属性相对于methods,多次调用时只会调用一次,而methods调用几次执行几次,没有缓存,性能更低

上一篇:vue 之computed 计算属性


下一篇:计算属性的getter和setter