07月07, 2019

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

计算属性

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

先看下面的代码:

<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>

computed-1

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

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

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

computed-2

留意上面的变化,当每次点击,执行方法其实是每次都在刷新页面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>

computed-3

本文链接:http://www.yanhongzhi.com/post/vue-computed.html

-- EOF --

Comments