Vue 中的computed和watch的區(qū)別是怎樣的

本篇文章為大家展示了Vue 中的computed和watch的區(qū)別是怎樣的，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

一、computed介紹

computed 用來監(jiān)控自己定義的變量，該變量在 data 內(nèi)沒有聲明，直接在 computed 里面定義，頁面上可直接使用。

//基礎(chǔ)使用
{{msg}}
<input v-model="name" /> 
  
 //計算屬性 
computed:{
 msg:function(){
  return this.name
 }
}

在輸入框中，改變 name 值得時候，msg 也會跟著改變。這是因為 computed 監(jiān)聽自己的屬性 msg，發(fā)現(xiàn) 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(){ //回調(diào)函數(shù) 當(dāng)需要讀取當(dāng)前屬性值是執(zhí)行，根據(jù)相關(guān)數(shù)據(jù)計算并返回當(dāng)前屬性的值
   return this.first + ' ' + this.second
   },
   set(val){ //監(jiān)視當(dāng)前屬性值的變化，當(dāng)屬性值發(fā)生變化時執(zhí)行，更新相關(guān)的屬性數(shù)據(jù)
    let names = val.split(' ')
    this.first = names[0]
    this.second = names[1]
  }
 }
}

get 方法：first 和 second 改變時，會調(diào)用 get 方法，更新 full 的值。

set 方法：修改 full 的值時，會調(diào)用 set 方法，val 是 full 的最新值。

 1.2、計算屬性緩存

我們通過方法，拼接數(shù)據(jù)，也可以實現(xiàn)該效果，代碼如下。

<div> {{ full() }} </div>
  
data(){
 return{
  first:'美女',
  second:'姐姐'
 }
},
methods:{
 full(){
 return this.first + ' ' + this.second
 }
},

一個頁面內(nèi)，數(shù)據(jù)有可能多次使用，我們把 computed 和 method 兩個方法放一起實現(xiàn)，并把這個數(shù)據(jù)在頁面內(nèi)多次引用，試看以下效果。

<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
 }
 }

運行結(jié)果為：

根據(jù)結(jié)果，我們不難發(fā)現(xiàn)，根據(jù)方法獲取到的數(shù)據(jù)，使用幾次就需要重新計算幾次，但計算屬性不是，而是基于它們的響應(yīng)式依賴進(jìn)行緩存的，之后依賴屬性值發(fā)生改變的時候，才會重新計算。由于它計算次數(shù)少，所以性能更高些。

二、watch介紹

watch 是監(jiān)測 Vue 實例上的數(shù)據(jù)變動，通俗地講，就是檢測 data 內(nèi)聲明的數(shù)據(jù)。不僅可以監(jiān)測簡單數(shù)據(jù)，還可以監(jiān)測對象或?qū)ο髮傩浴?/p>

Demo1：監(jiān)測簡單數(shù)據(jù)

<input v-model="first" > <br>
  
data(){
 return{
  first:'美女',
  }
 },
watch:{
 first( newVal , oldVal ){
 console.log('newVal',newVal) // first 的最新值
 console.log('oldVal',oldVal) // first上一個值
 }
},
// 修改 first的值的時候，立馬會打印最新值

 Demo2：監(jiān)測對象

監(jiān)聽對象的時候，需要使用深度監(jiān)聽。

<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 的時候，發(fā)現(xiàn) newVal 和 oldVal 的值是一樣的，是因為他們存儲的指針指向的是同一個地方，所以深度監(jiān)聽雖然可以監(jiān)聽到對象的變化，但是無法監(jiān)聽到具體的是哪個屬性發(fā)生變化了。

Demo3：監(jiān)聽對象的單個屬性

// 方法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 作為中間轉(zhuǎn)換，如下：

// 方法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：監(jiān)聽 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 監(jiān)聽的 mm 中的打印并沒有執(zhí)行。

使用 immediate 時，第一次加載時也會打印結(jié)果：newV 11 oldV undefined。

immediate 主要作用就是組件加載時，會立即觸發(fā)回調(diào)函數(shù)。

三、兩者區(qū)別

3.1、對于 computed

• computed 監(jiān)控的數(shù)據(jù)在 data 中沒有聲明

• computed 不支持異步，當(dāng) computed 中有異步操作時，無法監(jiān)聽數(shù)據(jù)的變化

• computed 具有緩存，頁面重新渲染，值不變時，會直接返回之前的計算結(jié)果，不會重新計算

• 如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，一般使用 computed

• computed 計算屬性值是函數(shù)時，默認(rèn)使用get方法。如果屬性值是屬性值時，屬性有一個get和set方法，當(dāng)數(shù)據(jù)發(fā)生變化時會調(diào)用set方法

computed:{
 //屬性值為函數(shù)
 perName:function(){
  return this.per.name
 },
 //屬性值為屬性值
 full:{
  get(){  },
  set(val){  }
 }
},

3.2、對于 watch

• 監(jiān)測的數(shù)據(jù)必須在 data 中聲明或 props 中數(shù)據(jù)

• 支持異步操作

• 沒有緩存，頁面重新渲染時，值不改變時也會執(zhí)行

• 當(dāng)一個屬性值發(fā)生變化時，就需要執(zhí)行相應(yīng)的操作

• 監(jiān)聽數(shù)據(jù)發(fā)生變化時，會觸發(fā)其他操作，函數(shù)有兩個參數(shù)：

immediate ：組件加載立即觸發(fā)回調(diào)函數(shù)
deep：深度監(jiān)聽，主要針對復(fù)雜數(shù)據(jù)，如監(jiān)聽對象時，添加深度監(jiān)聽，任意的屬性值改變都會觸發(fā)。
注意：對象添加深度監(jiān)聽之后，輸出的新舊值是一樣的。

computed 頁面重新渲染時，不會重復(fù)計算，而 watch 會重新計算，所以 computed 性能更高些。

四、應(yīng)用場景

當(dāng)需要進(jìn)行數(shù)值計算，并且依賴于其它數(shù)據(jù)時，應(yīng)該使用 computed ，因為可以利用 computed 的緩存特性，避免每次獲取值時都要重新計算。

當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步操作或開銷較大的操作時，應(yīng)該使用 watch，computed 不支持異步。如果需要限制執(zhí)行操作的頻率，可借助 computed 作為中間狀態(tài)。

上述內(nèi)容就是Vue 中的computed和watch的區(qū)別是怎樣的，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。