簡單聊聊Vue中的計算屬性和屬性偵聽
阿新 • • 發佈：2021-10-09
目錄
- 1. 計算屬性
- 語法: 1.簡寫方式:
- 語法: 2.完整寫法:
- 2. 監視（偵聽）屬性
- 1. 監視屬性watch：
- 2. 深度監視
- 3. 區別和原則
- 總結
1. 計算屬性
定義
- 計算屬性：要用的屬性不存在，要通過已有屬性計算得來，計算屬性要有一個全新的配置項computed
- 對來說，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一定要寫returnhttp://www.cppcns.com)
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. 監視（偵聽）屬性
<!-- 繫結IBoCf事件的時候：@xxx="yyy" yyy可以寫一些簡單的語句 -->
<button @click="isHot = !isHot">切換天氣</button>
1. 監視屬性watch：
當被監視的屬性變化時,handler回撥函式自動呼叫,進行相關操作
監視的屬性必須存在，才能進行監視！！
...
// 寫法1. 傳入watch配置 偵聽ishot屬性
watch:{
isHot:{
immediate:true,//初始化時讓handler呼叫一下
//handler什麼時候呼叫？當isHot發生改變時。
www.cppcns.com 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被修改了',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被修改了',oldValue,this)
}
}
/* vm.$watch('isHot',function (newValue,oldValue) {
console.log('isHot被修改了',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計算屬性和屬性偵聽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！