Vue 计算属性与方法

时间 2020-11-21 标签 vue 缓存 app 性能 this 代理 code 对象 blog 事件

computed

基本使用

　　若是数据须要有复杂的计算，则能够在Vue实例中定义计算属性，再交由mustache进行渲染。vue

computed内部实际上是经过getttr实现的，因此不用加括号便可完成其下方法的调用

computed对象内部的方法若是想调用同一Vue实例下的方法或者属性，可以使用this进行调用，Vue内部会经过代理器进行查找

　　以下所示，咱们须要计算书籍的总价格：缓存

<div id="app">
    书籍的总价格是:{{totalPrice}}
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            books: {
                "Vue实战": 128,
                "JavaScrip入门": 99,
                "HTML5初识": 87,
                "CSS3": 68,
            }
        },
        computed: {
            totalPrice() {
                return Object.values(this.books).reduce((pre, cur) => {
                    return pre + cur;
                }, 0)
            }
        }
    })
</script>

计算特性

　　若是修改了数据源，那么计算属性会从新进行计算，以下所示，书籍总价原本为382，当咱们修改其中任意一本书的价格后，书籍总价格也将发生改变：app

methods

基本使用

　　 methods中定义的方法一般都是搭配事件监听作回调的，虽然咱们也可让它计算书籍的总价格，但这并非一个明智的选择：性能

methods下所定义的方法必须加括号才能完成调用

methods对象内部的方法若是想调用同一Vue实例下的方法或者属性，可以使用this进行调用，Vue内部会经过代理器进行查找

　　以下实例，用methods也能够完成书籍总价格的计算，同时它也用于computed的计算特性：this

<body>
<div id="app">
    书籍的总价格是:{{totalPrice()}}
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            books: {
                "Vue实战": 128,
                "JavaScrip入门": 99,
                "HTML5初识": 87,
                "CSS3": 68,
            }
        },
        computed: {

        },
        methods:{
            totalPrice() {
                return Object.values(this.books).reduce((pre, cur) => {
                    return pre + cur;
                }, 0)
            }
        }
    })
</script>
</body>

差别区别

缓存特性

　　 computed具备缓存特性，即屡次调用只会调用一次，只有当数据源发生改变时才会自行调用一次。代理

　　而methods没有缓存特性，调用几回就执行几回，而且当数据源发生改变时也会自动调用以前的次数。code

<body>
<div id="app">
    {{computedAdd}}
    {{computedAdd}}
    {{computedAdd}}
    <hr>
    {{methodsAdd()}}
    {{methodsAdd()}}
    {{methodsAdd()}}
    <button type="button">查看各执行几回</button>
</div>
<script src="./vue.js"></script>
<script>

    let computedCount = 0;
    let methodsCount = 0;

    const app = new Vue({
        el: "#app",
        data: {
            num1: 100,
            num2: 200,
        },
        computed: {
            computedAdd() {
                computedCount++;
                return this.num1 + this.num2;
            }

        },
        methods: {
            methodsAdd() {
                methodsCount++;
                return this.num1 + this.num2;
            }
        }
    })

    document.querySelector("button").addEventListener("click", () => {
        console.log(`computed调用了${computedCount}次`);
        console.log(`methods调用了${methodsCount}次`);
    },)

</script>
</body>

使用建议

　　计算属性，故名思意，当多个属性经过大量计算才能获得结果时当使用计算属性，由于它具备缓存特性调用次数较少因此性能比使用methods要高。对象

　　你只能调用一次计算属性，剩下的都是被动调用。blog

　　方法则是与事件作对应的，因此不该该使用方法来执行对属性的计算，方法具备主动调用的特性，你能够屡次进行主动调用，固然它也能够自动调用。事件