技術標籤：vuejs

1、計算屬性的使用

 <div class='app'>
        <h2>{{fullname}}</h2>
    </div>
    <script src='../vue.js'></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                message: '你好啊，世界！',
                firstname:
 
 "Shelly",
                lastname: "hh"
            },
            computed: {
                fullname: function () {
                    console.log("fullname");
                    return this.firstname + " " + this.lastname;
                }
            }
 

        })
    </script>

2、為什麼使用計算屬性
在上面的程式碼新增幾行

  <div class='app'>
        <h2>{{fullname}}</h2>
        <h2>{{fullname}}</h2>
        <h2>{{fullname}}</h2>
        <h2>{{fullname}}</h2>
    </div>

可以發現，該屬性只調用了一次函式，其實是因為該屬性有一個快取機制，能夠快取其中的資料，提高程式碼的效率。