Vue計算屬性與監(jiān)視屬性實現(xiàn)方法詳解
一、計算屬性
在開發(fā)中,可以有這樣的需求,在屬性(date)中,有fistName和lastName兩個屬性,需要將兩個屬性拼接起來,這種需求也很簡單,有以下實現(xiàn)方式
1、插值語法實現(xiàn)
直接在body中將兩個數(shù)據(jù)拼接
<div id="root"> 姓:<input type="text" v-model="fistName"><br><br> 名:<input type="text" v-model="lastName"><br><br> 姓名:<span>{{fistName + lastName}}</span> </div>
2、通過方法實現(xiàn)
編寫一個方法,返回值為兩者拼在一起的字符串
<div id="root"> 姓:<input type="text" v-model="fistName"><br><br> 名:<input type="text" v-model="lastName"><br><br> <!-- 只要數(shù)據(jù)發(fā)生改變,這個方法就會再被調(diào)用一次 --> 姓名:<span>{{fullName()}}</span> </div>
new Vue({ el:'#root', data:{ fistName:'張', lastName:'三' }, methods: { fullName(){ return this.fistName + this.lastName; } }, })
3、通過計算屬性
計算屬性就是vue中的computed,這里面存放的是計算屬性
而data中的是屬性,兩者不一樣
<div id="root"> 姓:<input type="text" v-model="fistName"><br><br> 名:<input type="text" v-model="lastName"><br><br> 姓名:<span>{{fullName}}</span> </div>
const vm = new Vue({ el:'#root', //屬性 data:{ fistName:'張', lastName:'三' }, // 計算屬性 computed:{ fullName:{ //當(dāng)有人讀取fullName時,get就會被調(diào)用,返回值為fullName的值 //get調(diào)用時機 //1、初次讀取fullName //2、所依賴的數(shù)據(jù)變化時 get(){ //這里的this是指vm return this.fistName + this.lastName; }, //當(dāng)fullName被調(diào)用時候調(diào)用 set(value){ const arr = value.split('-') this.fistName = arr[0] this.lastName = arr[1] } } } })
計算屬性和方法的編寫方式有點區(qū)別
- {{}}中方法是寫一個方法的,即帶括號
- 但是計算屬性只需要寫名字即可,不用帶花括號
計算屬性中要編寫兩個方法,一個是get方法,另一個是set方法
- 當(dāng)有人讀取fullname這個計算屬性,get方法就會被調(diào)用,返回值是fullname的值
- 當(dāng)有人修改fullname這個計算屬性,set方法就會被調(diào)用
當(dāng)明確只有g(shù)et方法,不需要set方法的時候,計算屬性可以簡寫成如下:
fullName(){ return this.fistName + this.lastName; }
get函數(shù)什么時候執(zhí)行:
- 初次讀取時會執(zhí)行一次
- 當(dāng)依賴的數(shù)據(jù)發(fā)生變化時會被調(diào)用一次
計算屬性的優(yōu)勢
相對于方法來說,計算屬性內(nèi)部有緩存機制(復(fù)用),效率更好,調(diào)試更方便
簡單來說,倘若計算屬性不變,計算屬性的數(shù)據(jù)就會存進緩存中,當(dāng)頁面上的其他數(shù)據(jù)需要讀取這個計算屬性的話,不再需要從vm獲取,直接從緩存里面獲取
二、監(jiān)視屬性
監(jiān)視屬性可以監(jiān)視某個屬性的變化,并且可以獲取變化前和變化后的數(shù)值
通過關(guān)鍵詞watch實現(xiàn)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天氣很{{info}}</h2> <button @click="changgeWeather">切換天氣</button> </div> </body> <script> Vue.config.productionTip = false; const vm = new Vue({ el: "#root", data: { isHot: true, }, computed: { info() { return this.isHot ? "炎熱" : "涼爽"; }, }, methods: { changgeWeather() { this.isHot = !this.isHot; }, }, // 監(jiān)視 //適用于一開始很明確地知道要監(jiān)視誰 watch: { isHot: { //初始化時讓handler調(diào)用一下 immediate: true, //什么時候調(diào)用?當(dāng)isHost發(fā)生改變時 handler(newValue, oldValue) { console.log("isHost被調(diào)用", newValue, oldValue); } }, // } }); </script> </html>
例如如上案例,當(dāng)isHost被修改的時候,監(jiān)視屬性中的isHost中的handler就會被調(diào)用
而 immediate: true 的作用是再初始化的時候調(diào)用一下這個監(jiān)視屬性
注意的是監(jiān)視屬性必須存在,才可以進行監(jiān)視
除了以上邪惡寫法,還可以通過vm.$watch監(jiān)視
vm.$watch("isHost", { //初始化時讓handler調(diào)用一下 immediate: true, //什么時候調(diào)用?當(dāng)isHost發(fā)生改變時 handler(newValue, oldValue) { console.log("isHost被調(diào)用", newValue, oldValue); }, });
兩種的使用場合不同:
- 第一個則是,一開始就很明確這個屬性需要監(jiān)視,則寫在vue里面
- 第二個則是,一開始不知道這個屬性需要被監(jiān)視,然后后面加上的,就可以用vm.$watch
當(dāng)監(jiān)視屬性只有handler的時候,可以進行簡寫
watch: { isHot((newValue, oldValue)): { console.log("isHost被調(diào)用", newValue, oldValue); } }
三、深度監(jiān)視
深度監(jiān)視主要用于監(jiān)視層次比較高的
data: { isHot: true, number: { a: 1, b: 1, }, }
例如這個data里面的number,需要監(jiān)視里面的a和b的變化,則需要用到監(jiān)視屬性
"number.a": { handler(newValue, oldValue) { console.log("a改變", newValue, oldValue); }, },
監(jiān)視對象里面的某個屬性,就可以如上這也進行操作,“對象.屬性”表示監(jiān)視里面的某一個屬性
同時也可以監(jiān)視number的變化,只需要在在里面開啟深度即可
number:{ //表示深度開啟 deep:true, handler(){ console.log("number發(fā)生改變"); }
監(jiān)視對象里面的某個屬性,就可以如上這也進行操作,“對象.屬性”表示監(jiān)視里面的某一個屬性
同時也可以監(jiān)視number的變化,只需要在在里面開啟深度即可
number:{ //表示深度開啟 deep:true, handler(){ console.log("number發(fā)生改變"); }
到此這篇關(guān)于Vue計算屬性與監(jiān)視屬性實現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)Vue計算屬性與監(jiān)視屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式
本篇文章主要介紹了詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01VUE element上傳動態(tài)設(shè)置action路徑和參數(shù)的坑及解決
這篇文章主要介紹了VUE element上傳動態(tài)設(shè)置action路徑和參數(shù)的坑及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07基于vue實現(xiàn)滾動條滾動到指定位置對應(yīng)位置數(shù)字進行tween特效
這篇文章主要介紹了基于vue實現(xiàn)滾動條滾動到指定位置對應(yīng)位置數(shù)字進行tween特效,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04