Vue中的計算屬性和屬性偵聽怎么實現

本文小編為大家詳細介紹“Vue中的計算屬性和屬性偵聽怎么實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue中的計算屬性和屬性偵聽怎么實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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中的計算屬性和屬性偵聽怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。