computed
var var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
上面是官網給出的例子，我們可以看到當我們某個屬性受多個屬性影響是我們用computed。computed計算屬性的使用場景例如我們使用淘寶京東啥的，進行購物車結算的時候我們就可以使用計算屬性computed。當我computed中的函數所依賴的屬性沒有發生變化，那麼調用當前的函數的時候會從緩存中讀取。在這個例子中當firstName和lastName沒有發生變化時，我們調用計算屬性的時候，是直接從緩存中獲取的。
watch
var var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
還是官網中的例子，fullName依賴於firstName和lastName，如果我們要用watch，那麼就要監聽兩個數據。watch的使用場景：當一條數據影響多條數據的時候，使用watch，如搜索框。官網同時提到當需要在數據變化時執行異步或開銷較大的操作時，watch方式是最有用的。簡單來說就是涉及異步操作然後需要設定不同中間值等，這時候就使用watch。
再補上一個watch的使用例子，會更好的瞭解watch如何使用
<body>
<div id="app">
<input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: ''
},
watch: {
num(newVal, oldVal) {
// 監聽 num 屬性的數據變化
// 作用 : 只要 num 的值發生變化,這個方法就會被調用
// 第一個參數 : 新值
// 第二個參數 : 舊值,之前的值
console.log('oldVal:',oldVal)
console.log('newVal:',newVal)
}
}
})
</script>
</body>