計算屬性 , computed 是用來計算出一個值,這個值在調用的時候會根據依賴的數據顯示新的計算結果並自動緩存。 若是依賴不變,computed中的值就不會從新計算。 注意 :不須要加(),javascript
模板內的表達式很是便利,可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護,例如:html
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
複製代碼
在這個地方,模板再也不是簡單的聲明式邏輯,你必須看一段時間才能意識到,這裏是想要顯示變量 message
的翻轉字符串,當你想要在模板中屢次引用此處的翻轉字符串時,就會更加難以處理。vue
因此,對於任何複雜邏輯,都應該使用計算屬性java
<body>
<div id="app"> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <h2>{{getFullName()}}</h2> <h2>{{fullName}}</h2> </div>
</body>
<script src="../js/vue.js"></script>
<script> const app = new Vue({ el: '#app', data: { firstName: 'Lron', lastName: 'Man' }, // 推薦使用計算屬性來操做,由於它會將這些數據進行緩存, 不管打印多少次,它只會調用一次 computed: { // 計算屬性 注意 : 計算的是 屬性, // 因此這裏面的屬性 當作一個 對象(用名詞形式來表達), 調用時候不用加小括號 fullName: function () { return this.firstName + ' ' + this.lastName } }, methods: { // 不會緩存, 因此有多少次就調用多少次, 沒有 computed 划算 getFullName: function () { return this.firstName + ' ' + this.lastName } } }) </script>
複製代碼
參考文檔:vue官方文檔:watchweb
監聽, 若是某個屬性依賴變化了就執行回調。 它有倆個屬性 1. immediate 表示數據是否在第一次渲染的時候當即執行該函數。 2. deep , 若是咱們監聽一個對象(不包括數組),是否要看對象裏面的屬性的變化。api
watch監聽的數據能夠是一個 字符串、函數、數組、對象數組
一個對象,鍵是須要觀察的表達式(data內的數據),值是對應回調函數。值也能夠是方法名,或者包含選項的對象。緩存
當數據發生改變時,會執行一個回調,它有倆個參數, newVal 和 oldValmarkdown
wtach有倆個屬性:app
this.$watch 和 watch 用法一致,只不過寫法有些不一樣,這裏不詳細說明
案例:
new Vue({
data: {
n: 0,
obj: {
a: "a"
}
},
template: ` <div> <button @click="n += 1">n+1</button> <button @click="obj.a += 'hi'">obj.a + 'hi'</button> <button @click="obj = {a:'a'}">obj = 新對象</button> </div> `,
watch: {
n() {
console.log("n 變了");
},
obj:{
handler: function (val, oldVal) {
console.log("obj 變了")
},
deep: true // 該屬性設定在任何被偵聽的對象的 property 改變時都要執行 handler 的回調,不論其被嵌套多深
},
"obj.a":{
handler: function (val, oldVal) {
console.log("obj.a 變了")
},
immediate: true // 該屬性設定該回調將會在偵聽開始以後被當即調用
}
}
}).$mount("#app");
複製代碼