一、computed介紹
computed 用來監控自己定義的變數，該變數在 data 內沒有宣告，直接在 computed 裡面定義，頁面上可直接使用。
//基礎使用
{{msg}}
<input v-model="name" /> //計算屬性
computed:{
msg:function(){
return this.name
}
}
在輸入框中，改變 name 值得時候，msg 也會跟著改變。這是因為 computed 監聽自己的屬性 msg，發現 name 一旦變動，msg 立馬會更新。
注意：msg 不可在 data 中定義，否則會報錯。
1.1、get 和 set 用法
<input v-model="full" ><br>
<input v-model="first" > <br>
<input v-model="second" > data(){
return{
first:'美女',
second:'姐姐'
}
},
computed:{
full:{
get(){ //回撥函式 當需要讀取當前屬性值是執行，根據相關資料計算並返回當前屬性的值
return this.first + ' ' + this.second
},
set(val){ //監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性資料
let names = val.split(' ')
this.first = names[0]
this.second = names[1]
}
}
}
get 方法：first 和 second 改變時，會呼叫 get 方法，更新 full 的值。
set 方法：修改 full 的值時，會呼叫 set 方法，val 是 full 的最新值。
1.2、計算屬性快取
我們通過方法，拼接資料，也可以實現該效果，程式碼如下。
<div> {{ full() }} </div>
data(){
return{
first:'美女',
second:'姐姐'
}
},
methods:{
full(){
return this.first + ' ' + this.second
}
},
一個頁面內，資料有可能多次使用，我們把 computed 和 method 兩個方法放一起實現，並把這個資料在頁面內多次引用，試看以下效果。
<div>
computed計算值：
{{full}} {{full}} {{full}} {{full}}
</div> <div>
methods計算值：
{{fullt}} {{fullt}} {{fullt}} {{fullt}}
</div> data(){
return{
first:'美女',
second:'姐姐'
}
},
computed:{
full:function(){
console.log('computed')
return this.first + ' ' + this.second
}
},
methods:{
fullt(){
console.log('方法')
return this.first + ' ' + this.second
}
}
執行結果為：
根據結果，我們不難發現，根據方法獲取到的資料，使用幾次就需要重新計算幾次，但計算屬性不是，而是基於它們的響應式依賴進行快取的，之後依賴屬性值發生改變的時候，才會重新計算。由於它計算次數少，所以效能更高些。
二、watch介紹
watch 是監測 Vue 例項上的資料變動，通俗地講，就是檢測 data 內宣告的資料。不僅可以監測簡單資料，還可以監測物件或物件屬性。
Demo1：監測簡單資料
<input v-model="first" > <br>
data(){
return{
first:'美女',
}
},
watch:{
first( newVal , oldVal ){
console.log('newVal',newVal) // first 的最新值
console.log('oldVal',oldVal) // first上一個值
}
},
// 修改 first的值的時候，立馬會列印最新值
Demo2：監測物件
監聽物件的時候，需要使用深度監聽。
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
per:{
handler(oldVal,newVal){
console.log('newVal',newVal)
console.log('oldVal',oldVal)
},
deep:true,
}
},
修改 per.name 的時候，發現 newVal 和 oldVal 的值是一樣的，是因為他們儲存的指標指向的是同一個地方，所以深度監聽雖然可以監聽到物件的變化，但是無法監聽到具體的是哪個屬性發生變化了。
Demo3：監聽物件的單個屬性
// 方法1：直接引用物件的屬性
<input v-model="per.name"> data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
'per.name':function(newVal,oldVal){
console.log('newVal->',newVal)
console.log('oldVal->',oldVal)
}
},
也可以藉助 computed 作為中間轉換，如下：
// 方法2：藉助computed
<input v-model="per.name"> data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
perName(){
console.log('name改變了')
}
},
computed:{
perName:function(){
return this.per.name
}
},
Demo4：監聽 props 元件傳過來的值
props:{
mm:String
},
//不使用 immediate
watch:{
mm(newV,oldV){
console.log('newV',newV)
console.log('oldV',oldV)
}
}
//使用 immediate
watch:{
mm:{
immediate:true,
handler(newV,oldV){
console.log('newV',newV)
console.log('oldV',oldV)
}
}
不使用 immediate 時，第一次載入頁面時，watch 監聽的 mm 中的列印並沒有執行。
使用 immediate 時，第一次載入時也會列印結果：newV 11 oldV undefined。
immediate 主要作用就是元件載入時，會立即觸發回撥函式。
三、兩者區別
3.1、對於 computed
- computed 監控的資料在 data 中沒有宣告
- computed 不支援非同步，當 computed 中有非同步操作時，無法監聽資料的變化
- computed 具有快取，頁面重新渲染，值不變時，會直接返回之前的計算結果，不會重新計算
- 如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，一般使用 computed
- computed 計算屬性值是函式時，預設使用get方法。如果屬性值是屬性值時，屬性有一個get和set方法，當資料發生變化時會呼叫set方法。
computed:{
//屬性值為函式
perName:function(){
return this.per.name
},
//屬性值為屬性值
full:{
get(){ },
set(val){ }
}
},
3.2、對於 watch
- 監測的資料必須在 data 中宣告或 props 中資料
- 支援非同步操作
- 沒有快取，頁面重新渲染時，值不改變時也會執行
- 當一個屬性值發生變化時，就需要執行相應的操作
- 監聽資料發生變化時，會觸發其他操作，函式有兩個引數：
immediate ：元件載入立即觸發回撥函式
deep：深度監聽，主要針對複雜資料，如監聽物件時，新增深度監聽，任意的屬性值改變都會觸發。
注意：物件新增深度監聽之後，輸出的新舊值是一樣的。computed 頁面重新渲染時，不會重複計算，而 watch 會重新計算，所以 computed 效能更高些。
四、應用場景
當需要進行數值計算，並且依賴於其它資料時，應該使用 computed ，因為可以利用 computed 的快取特性，避免每次獲取值時都要重新計算。
當需要在資料變化時執行非同步操作或開銷較大的操作時，應該使用 watch，computed 不支援非同步。如果需要限制執行操作的頻率，可藉助 computed 作為中間狀態。