快捷導(dǎo)航

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

更新時間：2021年10月05日 09:00:01 作者：給我一個div

計算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯,vue提供了檢測數(shù)據(jù)變化的一個屬性watch可以通過newVal獲取變化之后的值,這篇文章主要給大家介紹了關(guān)于Vue中計算屬性和屬性偵聽的相關(guān)資料,需要的朋友可以參考下

1. 計算屬性

定義

計算屬性：要用的屬性不存在，要通過已有屬性計算得來，計算屬性要有一個全新的配置項computed
對Vue來說，data里面的數(shù)據(jù)就是屬性，只要Vue中的數(shù)據(jù)改變，就會重新解析模板，遇到插值語法里的方法會重新調(diào)用

原理

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

get函數(shù)什么時候執(zhí)行？

初次讀取時會執(zhí)行一次。
當(dāng)依賴的數(shù)據(jù)發(fā)生改變時會被再次調(diào)用。

優(yōu)勢

與methods實現(xiàn)相比，內(nèi)部有緩存機制（復(fù)用），效率更高，調(diào)試方便。

備注

計算屬性最終會出現(xiàn)在vm(Vue實例)上，直接讀取使用即可。
如果計算屬性要被修改，那必須寫set函數(shù)去響應(yīng)修改，且set中要引起計算時依賴的數(shù)據(jù)發(fā)生改變。

語法: 1.簡寫方式:

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

需求: 求2個數(shù)的和顯示到頁面上

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

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

<style>

</style>

語法: 2.完整寫法:

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

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

get什么時候調(diào)用？ 1.初次讀取fullName時。 2.所依賴的數(shù)據(jù)發(fā)生變化時。

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

set:當(dāng)計算屬性的值被修改時被調(diào)用形參接收的是傳入的新值

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

2. 監(jiān)視（偵聽）屬性

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

1. 監(jiān)視屬性watch：

當(dāng)被監(jiān)視的屬性變化時, handler回調(diào)函數(shù)自動調(diào)用, 進行相關(guān)操作

監(jiān)視的屬性必須存在，才能進行監(jiān)視?。?/p>

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

2. 深度監(jiān)視

深度監(jiān)視：

1）Vue中的watch默認不監(jiān)測對象內(nèi)部值的改變（一層）。
2）配置deep:true可以監(jiān)測對象內(nèi)部值改變（多層）。

備注：

1）Vue自身可以監(jiān)測對象內(nèi)部值的改變，但Vue提供的watch默認不可以！
2）使用watch時根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視。

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

監(jiān)視屬性-簡寫

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

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

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

3. 區(qū)別和原則

computed和watch之間的區(qū)別

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

兩個重要的小原則

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

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