1.computed(計算屬性)

根據一個現有資料去生成一個新資料，並且這兩個資料會永久的建立關係，還會建立快取，當無關資料改變的時候，不會重新計算而是直接使用快取中的值

<div id="app">
    <p>計算屬性fullName:{{fullName}}</p>
</div>

<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            firstName: 'Foo',  
            lastName: 
 
'Bar',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    })
</script>

需要注意的是，就算在data中沒有直接宣告出要計算的變數，也可以直接在computed中寫入。

2.computed的快取功能

<div id="app">
    <h1>{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>

<!--script部分-->
let vm 
 
= new Vue({
    el: '#app',
    data: {
        message: '我是訊息，'
    },
    methods: {
        methodTest() {
            return this.message + '現在我用的是methods'
        }
    },
    computed: {
        computedTest() {
            return this.message + '現在我用的是computed'
        }
    }
})

　　methods定義的方法是以函式呼叫

　　computed依賴於data中的資料，只有在它的相關依賴資料發生改變時才會重新求值

　　如上例，在Vue例項化的時候，computed定義computedTest方法會做一次計算，返回一個值，在隨後的程式碼編寫中，只要computedTest方法依賴的message資料不發生改變，computedTest方法是不會重新計算的，也就是說test3-1,test3-2是直接拿到了返回值，而非是computedTest方法重新計算的結果。

　　這樣的好處也是顯而易見的，同樣的，如果我們碰到一個場景，需要1000個computedTest的返回值，那麼毫無疑問，這相對於methods而言，將大大地節約記憶體
哪怕你改變了message的值，computedTest也只會計算一次而已