vue中computed 和 methods 差別

我們先來看一下概念，文字性的描述，可能小夥伴不是很明白，那我們就上代碼~

計算屬性computed ：

​ 不支援異步；響應式依賴進行緩存 ，資料發生改變，才會重新進行計算；多對一 或 一對一；屬性值是函數。

computed本身就是一個屬性，完成各種複雜的邏輯，包括運算、函數調用等，隻要最終傳回一個結果就可以。其本質是computed内部有兩個方法（set和get），computed最終傳回的結果是get方法的傳回值，預設會走get方法，資料變化時，調用set方法。不需要加括号。内部變量不變或其傳回值不變的情況下多次調用隻會執行一次，後續執行時直接從緩存中擷取computed的結果，當計算結果發生變化才會被調用。

上代碼：

<div>{{fullName}}</div>
//不需要加括号{{fullName()}}
           

data(){
    return{
      xName:"鲸魚",
      mName:"飽飽"
    }
  },
 computed:{
   fullName(){
     return this.xName + this.mName
   }
 },
           

methods ：

methods使用時，一般情況需要加括号，每次調用時會重新執行函數。頁面剛加載時調用一次，以後隻有被調用的時候才會被調用，沒有緩存，每次調用時會重新執行函數，必須以函數形式調用，不是響應式。

上代碼：

div>{{name()}}</div>
//需要加括号{{name()}}
           

data(){
    return{
      xName:"鲸魚",
      mName:"飽飽"
    }
  },
  methods:{ 
      name(){
      return this.xName + this.mName
    }
  } ,
           

如果小夥伴們不是很明白，我們可以console.log（）看一下：

computed：

//多複制幾個出來，我這裡一共有三個
<div>{{fullName}}</div>
<div>{{fullName}}</div>
<div>{{fullName}}</div>
           

data(){
    return{
      xName:"鲸魚",
      mName:"飽飽"
    }
  },
 computed:{
   fullName(){
   //在這裡 console.log("fullName")
   console.log("fullName")
     return this.xName + this.mName
   }
 },
           

結果：我們就可以得出結論啦~ 發現利用緩存，隻走了1次

再來看一下：

methods：

多複制幾個出來，為了可以更清楚的看出來，同樣也有三個
	<div>{{name()}}</div>
    <div>{{name()}}</div>
    <div>{{name()}}</div> 

           

data(){
    return{
      xName:"鲸魚",
      mName:"飽飽"
    }
  },
  methods:{ 
      name(){
      //這裡列印 console.log("name")
      	console.log("name")
      	return this.xName + this.mName
    }
  } ,
           

結果：我們就可以得出結論啦~ 發現沒有利用緩存，每次調用都會執行