簡單聊聊Vue中的計算屬性和屬性偵聽

Posted on by

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計算屬性和屬性偵聽內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：