Vue.js实战 学习笔记 三(计算属性)

在Vue中,可以直接在模板中(视HTML为一个模板,然后往里填放数据)双向绑定数据或表达式时,表达式可能会很长,或逻辑复杂,难以维护管理

此时需要使用 计算属性:以函数的形式,写入Vue实例中的computed选项中,最终返回的为计算后的结果。

在计算属性中,可以实现各种逻辑,包括运算、函数调用等,同时可依赖多个Vue实例的数据,只要其中一个变化就会执行计算属性,更新视图:

<div id="app">
    <p>prices:{{prices}}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            package1: [{
                name: 'iphone5'
                price: '3000'
                count: '2'
            } {
                name: 'iphone6'
                price: '4000'
                count: '3'
            }]
            package2: [{
                name: 'ipad'
                price: '3000'
                count: '2'
            } {
                name: 'ipad pro'
                price: '4000'
                count: '3'
            }]

            computed: {
                prices: function () {
                    var prices = 0;
                    for (var i = 0; i < this.package1.length; i++) {
                        prices += this.package1[i].price * this.package1.price[i].count
                    }
                    for (var i = 0; i < this.package2.length; i++) {
                        prices += this.package2[i].price * this.package2.price[i].count
                    }
                    return prices;
                }
            }
        }
    })
</script>

每个计算属性包括一个getter(读取)和一个setter(修改时会触发),通常情况下会使用默认用法,故不进行细致了解

计算属性computed依赖其他实例数据:

<div id="app1"></div>
<div>
     {{text}}
</div>

<script>
    var app1 = new Vue({
        el: '#app1',
        data: {
            text: '123,456'
        }
    });
    var app2 = new Vue({
        el: '#app2',
        computed: {
            text: function(){
                //依赖app1中的数据
                return app1.text
            }
        }
    })
</script>

注:

在某些时候,使用methods中定义一个方法,可以达到和computed相同的效果

使用计算属性依赖于缓存,只有当计算属性依赖的数据变化的时候,才会进行重新取值,即,data不变,computed不更新

而methods中定义的属性和方法,并不依赖于数据,可自行写出方法与函数,只要重新渲染即被调用

//data没有发生改变,computed不会进行函数的调用
computed: {
    now: function(){
        return Date.now()
    }
}

//重新渲染,methods即会发生调用
methods: {
    now: function(){
        return Date.now()
    }
}

猜你喜欢

转载自www.cnblogs.com/cyuanwu/p/9787228.html
今日推荐