全面分析 Vue 的 computed 和 watch 的區別

一、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 作為中間狀態。