Vue系统学习：03、计算属性

一、定义：

①、就是在显示数据之前，对数据进行一些操作转化后再显示。

②、将冗长复杂的展示数据处理的简短简洁，再来写到{{}}里面。

③、conputed：计算属性写在里面。

④、计算属性效率高，多次调用也只会执行一次。methods效率低，每次调用都会执行。

    <div id="app">
        <!-- 不要计算属性 -->
        <h2>{{msg1}} {{msg2}}</h2>  
        <!-- 使用计算属性。代码简洁 -->
        <h2>{{fullMsg}}</h2>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        const test = new Vue({
            el: '#app',
            data: {
                msg1: 'hello',
                msg2: 'word'
            },
            computed: {
                fullMsg() {
                    return this.msg1 + ' ' + this.msg2
                }
            }
        })
    </script>