如何理解Vue中的計算屬性和屬性偵聽

這篇文章主要講解了“如何理解Vue中的計算屬性和屬性偵聽”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何理解Vue中的計算屬性和屬性偵聽”吧！

目錄

• 1. 計算屬性

• 語法:  1.簡寫方式:

• 語法:  2.完整寫法:
  

• 2. 監視（偵聽）屬性
  

• 1. 監視屬性watch：

• 2. 深度監視

• 3. 區別和原則

• 總結

1. 計算屬性

定義

• 計算屬性：要用的屬性不存在，要通過已有屬性計算得來，計算屬性要有一個全新的配置項computed

• 對Vue來說，data里面的數據就是屬性，只要Vue中的數據改變，就會重新解析模板，遇到插值語法里的方法會重新調用

原理

• 底層借助了Objcet.defineproperty方法提供的getter和setter。

get函數什么時候執行？

• 初次讀取時會執行一次。

• 當依賴的數據發生改變時會被再次調用。

優勢

• 與methods實現相比，內部有緩存機制（復用），效率更高，調試方便。

備注

• 計算屬性最終會出現在vm(Vue實例)上，直接讀取使用即可。

• 如果計算屬性要被修改，那必須寫set函數去響應修改，且set中要引起計算時依賴的數據發生改變。

語法:  1.簡寫方式:

 computed: {
     "計算屬性名" () {
         return "值"
     }
 }

需求: 求2個數的和顯示到頁面上

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      a: 10,
      b: 20
    }
  },
  // 計算屬性:
  // 場景: 一個變量的值, 需要用另外變量計算而得來
  /*
    語法:
    computed: {
      計算屬性名 () {
        return 值
      }
    }
  */
 // 注意: 計算屬性和data屬性都是變量-不能重名
 // 注意2: 函數內變量變化, 會自動重新計算結果返回
  computed: {
    num(){
      return this.a + this.b
    }
  }
}
</script>

<style>

</style>

語法:  2.完整寫法:

計算屬性寫成配置對象的格式:對象中用get和set函數

get的作用:  當有人讀取fullName時，get就會被調用，且返回值就作為計算屬性的值  (get一定要寫return)

get什么時候調用？ 1.初次讀取fullName時。 2.所依賴的數據發生變化時。

 get(){
                console.log('get被調用了')
                // console.log(this) //  此處的this是vm(Vue實例)
                return this.firstName + '-' + this.lastName
            },

set:當計算屬性的值被修改時被調用 形參接收的是傳入的新值

  ...
  computed:{
      fullName:{
          //get有什么作用？當有人讀取fullName時，get就會被調用，且返回值就作為fullName的值
          //get什么時候調用？1.初次讀取fullName時。2.所依賴的數據發生變化時。
          get(){
              console.log('get被調用了')
              // console.log(this) //此處的this是vm
              return this.firstName + '-' + this.lastName
          },
          //set什么時候調用? 當fullName被修改時。
          set(value){
              console.log('set',value)
              const arr = value.split('-')
              this.firstName = arr[0]
              this.lastName = arr[1]
          }
      }
  }
})

2. 監視（偵聽）屬性

<!-- 綁定事件的時候：@xxx="yyy" yyy可以寫一些簡單的語句 -->
<button @click="isHot = !isHot">切換天氣</button>

1. 監視屬性watch：

當被監視的屬性變化時, handler回調函數自動調用, 進行相關操作

監視的屬性必須存在，才能進行監視！！

  ...
      // 寫法1. 傳入watch配置 偵聽ishot屬性
      
      watch:{
          isHot:{
              immediate:true, //初始化時讓handler調用一下
              
              //handler什么時候調用？當isHot發生改變時。
              
              handler(newValue,oldValue){
                  console.log('isHot被修改了',newValue,oldValue)
              }
          }
      }
  })
  
  
  // 寫法2. 通過vm.$watch監視
vm.$watch('isHot',{
   immediate:true, //初始化時讓handler調用一下，默認是false
   //handler什么時候調用？當isHot發生改變時。
   handler(newValue,oldValue){ // 有兩個參數，一個是新值，一個是舊值
   	console.log('isHot被修改了',newValue,oldValue)
   }
})

2. 深度監視

深度監視：

• 1）Vue中的watch默認不監測對象內部值的改變（一層）。

• 2）配置deep:true可以監測對象內部值改變（多層）。

備注：

• 1）Vue自身可以監測對象內部值的改變，但Vue提供的watch默認不可以！

• 2）使用watch時根據數據的具體結構，決定是否采用深度監視。
  

data:{
	isHot:true,
	numbers:{
		a:1,
		b:1
	}
},
watch:{
	// 監視多級結構中某個屬性的變化（原始寫法是要加引號的，簡寫可以不加，但這種情況要加，否則報錯）
	/* 'numbers.a':{
		handler(){
			console.log('a被改變了')
		}
	} */
	//監視多級結構中所有屬性的變化
	numbers:{
		deep:true, // 如果不開啟這個，那監測的就是numbers的地址是否有變化
		handler(){
			console.log('numbers改變了')
		}
	}
}

監視屬性-簡寫

當監視屬性中只有handler()而不需要開啟其他配置項時才能簡寫

watch:{
	isHot(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	}
}

/* vm.$watch('isHot',function (newValue,oldValue) {
	console.log('isHot被修改了',newValue,oldValue,this)
}) */

3. 區別和原則

computed和watch之間的區別

• computed能完成的功能，watch都可以完成。

• watch能完成的功能，computed不一定能完成，例如：watch可以進行異步操作。

兩個重要的小原則

• 所有被Vue管理的函數，最好寫成普通函數，這樣this的指向才是vm 或 組件實例對象。

• 所有不被Vue所管理的函數（定時器的回調函數、ajax的回調函數等、Promise的回調函數），最好寫成箭頭函數，這樣this的指向才是vm 或 組件實例對象。

watch:{
	firstName(val){
		setTimeout(()=>{
			console.log(this) //vue實例對象，若用普通函數則返回Window
			this.fullName = val + '-' + this.lastName
		},1000);
	},
	lastName(val){
		this.fullName = this.firstName + '-' + val
	}
}

感謝各位的閱讀，以上就是“如何理解Vue中的計算屬性和屬性偵聽”的內容了，經過本文的學習后，相信大家對如何理解Vue中的計算屬性和屬性偵聽這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！