计算属性

计算属性

计算属性你可以这么来理解：它就是一个方法，但是以属性的形式调用，是方法性能提高版本

先看下面的代码：

<body>
    <div id='app'>
        <p>{{message}}</p>
        <p>{{message.split("").reverse().join("")}}</p>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
    el:'#app',
    data:{
        message:'Hello Mr.Yan!'
    }
})
</script>

我们可以直接在{{}}模板语法中去做一些简单处理。比如上面的让字母倒序的处理，但是这么做，会在调用时逻辑不清晰，而且如果要重复调用就十分麻烦了。我们首先能想到的就是使用方法，当然VUE除了方法之外还能使用一个计算属性：

<body>
    <div id='app'>
        <p>{{message}}</p>
        <p>{{message.split("").reverse().join("")}}</p>
        <hr>
        <p>方法: {{reverseFn()}}</p>
        <p>计算属性: {{reverseComputed}}</p>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
    el:'#app',
    data:{
        message:'Hello Mr.Yan!'
    },
    methods: {
        reverseFn:function(){
            return this.message.split("").reverse().join("");
        }
    },
    computed: {
        reverseComputed:function(){
            return this.message.split("").reverse().join("");
        }
    }
})
</script>

通过上面的列子，可以看到，计算属性和方法在写法上其实差不多，在调用上，计算属性就是一般的属性调用方式，而方法，当然需要像方法一样调用，需要加上括号

那有方法就可以了，为什么还要加上计算属性呢？

从结果来看，它们的结果的确是一样的，但是它们也有区别，那就是计算属性是基于它们的依赖进行缓存的，而方法是需要每次去计算的，上面的代码中，如果方法多次被调用，都会去执行内部的代码，而对于计算属性来说，它是基于它们的依赖进行缓存，意思就是说计算属性会缓存它计算出来的值，只要它的依赖没有变化，那么它每次取的值就是缓存起来的结果，而并不会再次去运算，这样就节省了调用的计算开销。在上面代码中，计算属性是依赖message的，只要message不变，计算属性不会再次计算，只有message变化了，计算属性才会再次计算

运行下面的代码，观察变化：

<body>
    <div id='app'>
        <button @click="hideFn">点击隐藏方法结果</button>
        <p v-show="fnFlag">方法: {{reverseFn()}}</p>
        <hr>
        <button @click="hideComputed">点击隐藏计算属性结果</button>
        <p v-show="computedFlag">计算属性: {{reverseComputed}}</p>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
    el:'#app',
    data:{
        fnFlag:true,
        computedFlag:true
    },
    methods: {
        reverseFn:function(){         
            return new Date().getMilliseconds();
        },
        hideFn:function(){
            this.fnFlag = !this.fnFlag;
        },
        hideComputed:function(){
            this.computedFlag = !this.computedFlag;
        }
    },
    computed: {
        reverseComputed:function(){           
            return new Date().getMilliseconds();
        }
    }
})
</script>

留意上面的变化，当每次点击，执行方法其实是每次都在刷新页面DOM，而计算属性则没有. 那是不是计算属性只要计算了之后就不会变呢？并不是，计算属性值的更改，是随着和他绑定的属性一起变化的。也就是说，计算属性如果绑定了依赖的值，那么只有这个值变化了，计算属性才会发生变化

观察下面的代码：

<body>
    <div id='app'>
        <p v-show="fnFlag">方法: {{reverseFn()}}</p>
        <hr>
        <p v-show="computedFlag">计算属性: {{reverseComputed}}</p>
        <hr>
        <input type="text" v-model="message">
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
    el:'#app',
    data:{
        message:"Hello,Mr.Yan",
        fnFlag:true,
        computedFlag:true
    },
    methods: {
        reverseFn:function(){         
            return this.message.split("").reverse().join("");
        }
    },
    computed: {
        reverseComputed:function(){        
            return this.message.split("").reverse().join("");
        }
    }
})
</script>

Mr.Yan

VUE--VUE基础--计算属性

计算属性

Comments