Vue計算屬性與監(jiān)視(偵聽)屬性的使用深度學習
計算屬性(computed)
計算屬性指的是通過一系列運算之后，最終得到一個值。這個動態(tài)計算出來的屬性值可以被模板結(jié)構(gòu)或methods方法使用，案例如下：
<div id="root">
R：<input type="text" v-model.number="r"><br>
G：<input type="text" v-model.number="g"><br>
B：<input type="text" v-model.number="b">
<div class="box" :style="{backgroundColor:rgb}">
{{rgb}}
</div>
<button @click="show">按鈕</button>
</div>
<script src="/vue/vue.js"></script>
<script>
const vm = new Vue({
el:'#root',
data:{
r:0 , g:0, b:0,
},
methods: {
show() {
console.log(this.rgb);
}
},
//所有計算屬性都要定義到computed節(jié)點之下
computed: {
// 計算屬性在定義的時候，要定義成“方法格式”，在這個方法中會生成好的rgb(x,x,x)的字符串
//實現(xiàn)了代碼的復用，只要計算屬性中依賴的數(shù)據(jù)變化了，則計算屬性會自動重新賦值
rgb() {
return `rgb(${this.r},${this.g},${this.b})`
}
}
})
</script>
使用名字動態(tài)改變實現(xiàn)計算屬性案例：
<div id="root">
<input type="text" v-model="firstname"><br>
<input type="text" v-model="lastname"><br>
全名：<span>{{fullname}}</span>
</div>
<script src="/vue/vue.js"></script>
<script>
const vm = new Vue({
el:"#root",
data:{
firstname:'張',
lastname:'三'
},
computed:{
fullname:{
//當初次讀取fullname或所依賴的數(shù)據(jù)發(fā)生變化時，get被調(diào)用
get(){
console.log('get被調(diào)用了');
return this.firstname+'-'+this.lastname
},
//當主動修改fullname時，set被調(diào)用
set(value){
console.log('set', value);
const arr = value.split('-');
this.firstname = arr[0]
this.lastname = arr[1]
}
}
}
})
</script>
計算屬性：
1.定義：要用的屬性不存在，要通過已有的屬性得來
2.原理：底層借助了Object.defineproperty方法提供的getter和setter
3.優(yōu)勢：與methods實現(xiàn)相比，內(nèi)部有緩存機制(復用)，效率更高，調(diào)試方便
4.備注：計算屬性最終會出現(xiàn)在vm上，直接讀取使用即可；如果計算屬性要被修改，那必須寫set函數(shù)去響應改變，且set中要引起計算時依賴的數(shù)據(jù)發(fā)生改變。
監(jiān)視屬性(watch)
watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對數(shù)據(jù)的變化做特定的操作。
監(jiān)視的兩種方法
通過new Vue時傳入watch配置：
<div id="root">
<input type="text" v-model="name">
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el:'#root',
data:{
name:''
},
//所有的偵聽器，都應該被定義到watch節(jié)點下
watch:{
// 偵聽器本質(zhì)上是一個函數(shù)，要監(jiān)視哪個數(shù)據(jù)的變化，就把數(shù)據(jù)名作為方法名即可
//newVal是“變化后的新值”，oldVal是“變化之前舊值”
name(newVal,oldVal){ //監(jiān)聽name值的變化
console.log("監(jiān)聽到了新值"+newVal, "監(jiān)聽到了舊值"+oldVal);
}
}
})
</script>
通過vm.$watch監(jiān)視：
<div id="root">
<h2>今天天氣很{{info}}</h2>
<button @click="changeWeather">切換天氣</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? '炎熱' : '涼爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
})
vm.$watch('info',{
handler(newVal,oldVal){
console.log('天氣被修改了', newVal, oldVal);
}
})
</script>
immediate選項
默認情況下，組件在初次加載完畢后不會調(diào)用watch偵聽器，如果想讓watch偵聽器立即被調(diào)用，則需要使用immediate選項，immediate的作用是控制偵聽器是否自動觸發(fā)一次，選項的默認值為：false
<div id="root">
<input type="text" v-model="name">
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el:'#root',
data:{
name:'admin'
},
watch:{
//定義對象格式的偵聽器
name:{
handler(newVal,oldVal){
console.log(newVal, oldVal);
},
immediate:true
}
}
})
</script>
深度監(jiān)視
如果watch偵聽的是一個對象，如果對象中的屬性值發(fā)生了變化，則無法被監(jiān)聽到。此時需要使用deep選項，開啟深度監(jiān)聽，只要對象中任何一個屬性變化了，都會觸發(fā)“對象的偵聽器”。
<div id="root">
<input type="text" v-model="info.name">
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el:'#root',
data:{
info:{
name:'admin'
}
},
watch:{
info: {
handler(newVal){
console.log(newVal);
},
//開啟深度監(jiān)聽
deep:true
}
}
})
</script>
如果想要偵聽的對象是子屬性的變化，則必須包裹一層單引號。
watch:{
"info.name"(newVal){
console.log(newVal);
}
}
總結(jié)：
1）Vue中的watch默認不監(jiān)測對象內(nèi)部值的改變(一層)
2）配置deep:true可以監(jiān)測對象內(nèi)部值改變(多層)
3）Vue自身可以監(jiān)測對象內(nèi)部值的改變，但Vue提供的watch默認不可以
4）使用watch時根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視
watch能開啟異步任務，案例如下：
<div id="root">
<input type="text" v-model="firstname"><br>
<input type="text" v-model="lastname"><br>
全名：<span>{{fullname}}</span>
</div>
<script src="/vue/vue.js"></script>
<script>
const vm = new Vue({
el:"#root",
data:{
firstname:'張',
lastname:'三',
fullname:'張-三'
},
//watch能開啟異步任務
watch:{
firstname(val){
setTimeout(()=>{
this.fullname = val + '-' + this.lastname
},1000)
},
lastname(val){
this.fullname = this.firstname+'-'+val
}
}
})
</script>
computed和watch之間的區(qū)別：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以進行異步操作。
隱性原則：
1.被Vue管理的函數(shù)，最好寫成普通函數(shù)，這樣this的指向才是vm或組件實例對象
2.不被Vue所管理的函數(shù)(定時器的回調(diào)函數(shù)、ajax的回調(diào)函數(shù)、Promise的回調(diào)函數(shù))，最好寫成箭頭函數(shù)，這樣this的指向才是vm或組件實例對象。
到此這篇關于Vue計算屬性與監(jiān)視(偵聽)屬性的使用的文章就介紹到這了,更多相關vue計算屬性和偵聽屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用Vue3實現(xiàn)交互式雷達圖的代碼實現(xiàn)
雷達圖是一種可視化數(shù)據(jù)的方式,用于比較多個類別中不同指標的相對值,它適用于需要展示多個指標之間的關系和差異的場景,本文給大家介紹了如何用Vue3輕松創(chuàng)建交互式雷達圖,需要的朋友可以參考下2024-06-06
利用vue3自己實現(xiàn)計數(shù)功能組件封裝實例
組件(Component) 是Vue.js最強大的功能之一,組件可以擴展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關于利用vue3自己實現(xiàn)計數(shù)功能組件封裝的相關資料,需要的朋友可以參考下2021-09-09
vuejs實現(xiàn)本地數(shù)據(jù)的篩選分頁功能思路詳解
今天做項目需要一份根據(jù)本地數(shù)據(jù)的篩選分頁功能，下面小編把vuejs實現(xiàn)本地數(shù)據(jù)的篩選分頁功能的實現(xiàn)思路分享到腳本之家平臺，需要的朋友可以參考下2017-11-11
在vue中實現(xiàn)在線預覽PDF文件我們可以使用vue-pdf來實現(xiàn),下面這篇文章主要介紹了Vue中使用vue-pdf嵌入和展示PDF文件的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue頁面右下角添加懸浮按鈕組件的方法代碼,在Vue項目中,通過在頂層路由文件中添加代碼,可以實現(xiàn)頁面左下角懸浮按鈕的功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-11-11
vue+Ant?Design進度條滑塊與input聯(lián)動效果實現(xiàn)
最近接到這樣一個需求滑塊進度與輸入框為一致,默認值為80,最小不能小于30,最大為100，怎么實現(xiàn)這個聯(lián)動效果呢，下面小編給大家分享下基于vue+Ant?Design進度條滑塊與input聯(lián)動效果的實現(xiàn)，感興趣的朋友跟隨小編一起看看吧2022-12-12
這篇文章主要介紹了詳解在vue-test-utils中mock全局對象，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細介紹了vue src動態(tài)加載請求獲取圖片的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
elementui之el-table如何通過v-if控制按鈕顯示與隱藏
這篇文章主要介紹了elementui之el-table如何通過v-if控制按鈕顯示與隱藏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue點擊項目唯一id生成器nanoid的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05