Vue組件的計算屬性和普通屬性的區(qū)別說明

更新時間：2023年01月20日 09:15:18 作者：小貓虎兒~

這篇文章主要介紹了Vue組件的計算屬性和普通屬性的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

計算屬性和普通屬性的區(qū)別說明

計算屬性關鍵詞: computed

計算屬性模板：

computed:{
? ? ? ? type:{
? ? ? ? ? ? ? ? get(){
? ? ? ? ? ? ? ? ? ? ? ? //getter
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? set(value){
? ? ? ? ? ? ? ? ? ? ? ? //setter
? ? ? ? ? ? ? ? }
? ? ? ? }
}

1.計算屬性本質是包含getter和setter的方法。

2.當獲取計算屬性時，實際上是在調用getter方法。vue會收集計算屬性的依賴，并緩存計算屬性返回的結果。只有當依賴變化的時候才會重新進行計算。

3.方法沒有緩存，每次調用方法都會導致重新執(zhí)行。

4.計算屬性的getter和setter參數(shù)固定：getter沒有參數(shù)，setter只有一個參數(shù)。而方法的參數(shù)不限。

5.最重要的區(qū)別是含義上面的區(qū)別：計算屬性也是一個數(shù)據(jù)，可以讀取也可以賦值。而方法含義上是一個操作用于處理一些事情。

計算屬性在處理一些復雜邏輯時是很有用的。

可以看下以下反轉字符串的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    {{ message.split('').reverse().join('') }}
</div>
    
<script>
const app = {
  data() {
    return {
      message: 'ILOVEVUE!!'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>
</html>

運行結果：

?。UVEVOLI

上例中模板變的很復雜起來，也不容易看懂理解。

接下來我們看看使用了計算屬性的實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>計算后反轉字符串: {{ reversedMessage }}</p>
</div>
    
<script>
const app = {
  data() {
    return {
      message: 'ILOVEVUE!!'
    }
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>
</html>

運行結果：