快捷導(dǎo)航

簡單聊聊Vue中的計(jì)算屬性和屬性偵聽

更新時(shí)間：2021年10月05日 09:00:01 作者：給我一個(gè)div

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

1. 計(jì)算屬性

定義

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

原理

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

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

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

優(yōu)勢(shì)

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

備注

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

語法: 1.簡寫方式:

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

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

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

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

<style>

</style>

語法: 2.完整寫法:

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

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

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

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

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

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

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

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

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

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

監(jiān)視的屬性必須存在，才能進(jìn)行監(jiān)視！！

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

2. 深度監(jiān)視

深度監(jiān)視：

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

備注：

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

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

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

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

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可以進(jìn)行異步操作。

兩個(gè)重要的小原則

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

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