目錄

• 一、computed介紹
• 1.1、get 和 set 用法
• 1.2、計算屬性快取
• 二、watch介紹
• 三、兩者區別
• 3.1、對於 computed
• 3.2、對於 watch
• 四、應用場景
  

一、computed介紹

computed 用來監控自己定義的變數，該變數在 data 內沒有宣告，直接在 computed 裡面定義，頁面上可直接使用。

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

在輸入框中，改變 name 值得時候，msg

注意：msg 不可在 data 中定www.cppcns.com義，否則會報錯。

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:'美女',methods:{
 full(){
 return this.first + ' ' + this.second
 }
},

一個頁面內，資料有可能多次使用，我們把 computed

<div>
  computed計算值：
  {{full}} {{full}} {{full}} {{full}}
</div>

<div>
  methods計算值：
  {{fullt}} {{fullt}} {{fullt}} {{fullt}}
</div>

data(){
 return{
  first:'美女',computed:{
 full:function(){
  console.log('computed')
  return this.first + ' ' + this.second
 }
},methods:{
 fullt(){
  console.log('方法')
  return this.first + ' ' + this.second
 }
 }

執行結果為：

根據結果，我們不難發現，根據方法獲取到的資料，使用幾次就需要重新計算幾次，但計算屬性不是，而是基於它們的響應式依賴進行快取的，之後依賴屬性值發生改變的時候，才會重新計算。由於它計算次數少，所以效能更高些。

二、watch介紹

watch 是監測 例項上的資料變動，通俗地講，就是檢測 data 內宣告的資料。不僅可以監測簡單資料，還可以監測物件或物件屬性。

Demo1：監測簡單資料

<input v-model="first" > <br>
  
data(){
 return{
  firhttp://www.cppcns.comst:'美女',}
 },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:'倩倩',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:'倩倩',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)
  }
}

不使用 immediate 時，第一次載入頁面時，watch 監聽的 mm 中的列印並沒有執行。

使用 immediate 時，第一次載入時也會列印結果：newV 11 oldV undefined。

immediate 主要作用就是元件載入時，會立即觸發回撥函式。

三、兩者區別

3.1、對於 computed

• computed 監控的資料在 data 中沒有宣告
• computed 不支援非同步，當 computed 中有非同步操作時，無法監聽資料的變化
• computed 具有快取，頁面重新渲染，值不變時，會直接返回之前的計算結果，不會重新計算
• 如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，一般使用 computed
• computed 計算屬性值是函式時，預設使用get方法。如果屬性值是屬性值時，屬性有一個get和set方法，當資料發生變TLbDgam化時會呼叫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 作為中間狀態。

總結：

到此這篇關於分析 Vue 的 computed 和 watch 的區別的文章就介紹到這了,更多相關Vue 的 computed 和 watch 的區別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！