目錄

前言

computed計(jì)算屬性

什么是計(jì)算屬性？

Vue的原有屬性是什么？

得到的全新的屬性是什么？

計(jì)算屬性怎么用？

計(jì)算屬性的作用是什么？

為什么說(shuō)代碼執(zhí)行率高了？

computed計(jì)算屬性中的this指向

computed計(jì)算屬性簡(jiǎn)寫(xiě)

watch偵聽(tīng)屬性

語(yǔ)法格式

watch偵聽(tīng)屬性中的this指向

watch深度監(jiān)視

watch的簡(jiǎn)寫(xiě)

watch和computed如何選擇

異步情況下

computed

watch

watch中異步中箭頭函數(shù)和普通函數(shù)this指向

---

前言

繼上篇文章介紹了Vue配置項(xiàng)中的methods，本文繼續(xù)介紹Vue配置項(xiàng)中的computed計(jì)算屬性和watch偵聽(tīng)屬性以及在使用如何選擇

computed計(jì)算屬性

什么是計(jì)算屬性？

使用Vue的原有屬性，經(jīng)過(guò)一系列的計(jì)算，最終得到了一個(gè)全新的屬性，叫做計(jì)算屬性。

Vue的原有屬性是什么？

data對(duì)象當(dāng)中的屬性可以叫做Vue的原有屬性。

得到的全新的屬性是什么？

表示生成了一個(gè)新的屬性，和data中的屬性無(wú)關(guān)了，新的屬性也有自己的屬性名和屬性值。

計(jì)算屬性怎么用？

語(yǔ)法格式：需要一個(gè)新的配置項(xiàng) computed

computed:{

? ? ? ? 計(jì)算屬性1：{

? ? ? ? ? ? ? ? get(){

? ? ? ? ? ? ? ? ? ? ? ? 當(dāng)讀取計(jì)算屬性1時(shí)，getter方法被自動(dòng)調(diào)用

????????????????}，

? ? ? ? ? ? ? ? set(){

? ? ? ? ? ? ? ? ? ? ? ? 當(dāng)修改計(jì)算屬性1時(shí)，setter方法被自動(dòng)調(diào)用

????????????????}

????????}，

? ? ? ? 計(jì)算屬性2：{}

}

計(jì)算屬性的作用是什么？

1. 代碼得到了復(fù)用
2. 代碼變得更加容易維護(hù)
3. 代碼的執(zhí)行效率高了

為什么說(shuō)代碼執(zhí)行率高了？

其實(shí)在methods中也可以調(diào)用函數(shù)方法來(lái)完成computed計(jì)算屬性能完成的事，那為什么會(huì)引入computed計(jì)算屬性呢？

舉例

<div class="app"><h1>{{msg}}</h1><input type="text" v-model="info">{{hh()}}{{hh()}}{{hh()}}{{hh()}}{{hh()}}{{xx}}{{xx}}{{xx}}{{xx}}{{xx}}</div><script>const vm = new Vue({el:'.app',data:{ msg:'computed計(jì)算屬性',info:''},methods:{hh(){console.log('methods方法執(zhí)行了');return 'hh'}},computed:{xx:{get(){console.log('計(jì)算屬性執(zhí)行了');return 'xx'}}}})</script>

執(zhí)行此代碼，methods中的函數(shù)方法以及computed中的計(jì)算屬性各調(diào)用5次

由結(jié)果看出，methods中的方法重復(fù)執(zhí)行了5次，而computed計(jì)算屬性只執(zhí)行了一次。

這是因?yàn)閏omputed計(jì)算屬性遵循一個(gè)緩存機(jī)制，將重復(fù)存入瀏覽器中，使用時(shí)直接拿出來(lái)即可，這樣代碼的執(zhí)行效率就變高了

computed計(jì)算屬性中的this指向

methods中的this是指向vue實(shí)例的,那computed計(jì)算屬性中的this是指向什么呢？

<div class="app"><h1>{{msg}}</h1><input type="text" v-model="info">{{reverse}}</div><script>const vm = new Vue({el:'.app',data:{ msg:'computed計(jì)算屬性',info:''},computed:{reverse:{get(){console.log(this);}}}})</script>

可知,computed計(jì)算屬性中的this是指向Vue實(shí)例對(duì)象的

computed計(jì)算屬性簡(jiǎn)寫(xiě)

當(dāng)不使用set()方法時(shí)，僅使用get()方法時(shí)可以使用簡(jiǎn)寫(xiě)

例：反轉(zhuǎn)字符串

 <div class="app"><h1>{{msg}}</h1><input type="text" v-model="info">字符串反轉(zhuǎn)后 ：{{reverse}}</div><script>const vm = new Vue({el:'.app',data:{ msg:'computed計(jì)算屬性',info:''},computed:{reverse(){return this.info.split('').reverse().join('')}}})</script>

直接省略get，將：換成（）后接{}即可，簡(jiǎn)寫(xiě)和完整寫(xiě)法對(duì)比

 // 簡(jiǎn)寫(xiě)reverse(){return this.info.split('').reverse().join('')},// 完整寫(xiě)法reverse:{get(){return this.info.split('').reverse().join('')}}

注意，簡(jiǎn)寫(xiě)后和methods中的函數(shù)方法寫(xiě)法相同，但這不是函數(shù)方法，這是計(jì)算屬性

watch偵聽(tīng)屬性

偵聽(tīng)屬性變化

語(yǔ)法格式

watch:{//可以監(jiān)視多個(gè)屬性//監(jiān)視哪個(gè)屬性，直接寫(xiě)屬性名字即可//可以監(jiān)視Vue的原有屬性，也可以監(jiān)視計(jì)算屬性num:{//固定寫(xiě)法，方法名必須叫handler//當(dāng)被監(jiān)視的屬性發(fā)生變化時(shí),handler就會(huì)自動(dòng)調(diào)用一次//handler方法有兩個(gè)參數(shù)，前一個(gè)參數(shù)代表屬性值改變后的新值，后一個(gè)參數(shù)代表屬性值改變之前的舊值handler(newValue,oldValue){console.log(newValue,oldValue);}}}

watch偵聽(tīng)屬性中的this指向

 watch:{//可以監(jiān)視多個(gè)屬性//監(jiān)視哪個(gè)屬性，直接寫(xiě)屬性名字即可//可以監(jiān)視Vue的原有屬性，也可以監(jiān)視計(jì)算屬性num:{//固定寫(xiě)法，方法名必須叫handler//當(dāng)被監(jiān)視的屬性發(fā)生變化時(shí),handler就會(huì)自動(dòng)調(diào)用一次//handler方法有兩個(gè)參數(shù)，前一個(gè)參數(shù)代表屬性值改變后的新值，后一個(gè)參數(shù)代表屬性值改變之前的舊值handler(newValue,oldValue){console.log(this === vm);}}}

由此可知，watch中的this也是指向vue實(shí)例對(duì)象的

watch深度監(jiān)視

如何偵聽(tīng)對(duì)象呢？

例：偵聽(tīng)a對(duì)象里面的b

<div class="app"><h1>{{msg}}</h1><input type="text" v-model="a.b"></div><script>const vm = new Vue({el:'.app',data:{msg:'watch偵聽(tīng)屬性',a:{b:0}},watch:{//可以監(jiān)視多個(gè)屬性//監(jiān)視哪個(gè)屬性，直接寫(xiě)屬性名字即可//可以監(jiān)視Vue的原有屬性，也可以監(jiān)視計(jì)算屬性'a.b':{//固定寫(xiě)法，方法名必須叫handler//當(dāng)被監(jiān)視的屬性發(fā)生變化時(shí),handler就會(huì)自動(dòng)調(diào)用一次//handler方法有兩個(gè)參數(shù)，前一個(gè)參數(shù)代表屬性值改變后的新值，后一個(gè)參數(shù)代表屬性值改變之前的舊值handler(newValue,oldValue){alert('111')}}}})</script>

偵聽(tīng)這種嵌套的需要加上" ",原本就是有的，只是省略了，當(dāng)偵聽(tīng)這種嵌套關(guān)系時(shí)，需要加上" ".

如果更深層次的嵌套，是否需要一直“...”下去呢？

不需要，vue給我提供了deep屬性

deep:true(默認(rèn)是false),當(dāng)deep:true時(shí)，代表開(kāi)啟了深度監(jiān)視，只需要監(jiān)視對(duì)象便可監(jiān)聽(tīng)該對(duì)象內(nèi)的所有屬性

 watch:{//可以監(jiān)視多個(gè)屬性//監(jiān)視哪個(gè)屬性，直接寫(xiě)屬性名字即可//可以監(jiān)視Vue的原有屬性，也可以監(jiān)視計(jì)算屬性a:{deep:true,//固定寫(xiě)法，方法名必須叫handler//當(dāng)被監(jiān)視的屬性發(fā)生變化時(shí),handler就會(huì)自動(dòng)調(diào)用一次//handler方法有兩個(gè)參數(shù)，前一個(gè)參數(shù)代表屬性值改變后的新值，后一個(gè)參數(shù)代表屬性值改變之前的舊值handler(newValue,oldValue){alert('111')}}}

watch的簡(jiǎn)寫(xiě)

原：

 watch:{a:{handler(){console.log('監(jiān)聽(tīng)到了');}}}

簡(jiǎn)寫(xiě)：

簡(jiǎn)寫(xiě)的條件是，不使用深度監(jiān)視及其他的任何屬性

 watch:{a(){console.log('監(jiān)聽(tīng)到了');}}

watch和computed如何選擇

• 當(dāng)computed和watch都能完成某個(gè)功能時(shí)，優(yōu)先選擇computed
• 當(dāng)程序中采用異步的方式時(shí)，只能使用watch

例：比較大小

先使用watch偵聽(tīng)屬性

<div class="app"><h1>{{msg}}</h1><button @click="add1">+1</button><br><button @click="add2">+1</button><br>num1:{{num1}}<br>num2:{{num2}}<br>比較結(jié)果：{{daxiao}}</div>
<script>const vm = new Vue({el:'.app',data:{msg:'computed和watch的選擇',num1:1,num2:1，daxiao:""},methods:{add1(){return this.num1++},add2(){return this.num2++}},watch:{num1(){if(this.num1 == this.num2){this.daxiao= this.num1 +'='+ this.num2}else if(this.num1 > this.num2){this.daxiao= this.num1+'>'+ this.num2}else {this.daxiao= this.num1+'<'+this.num2}},num2(){if(this.num1 == this.num2){this.daxiao= this.num1 +'='+ this.num2}else if(this.num1 > this.num2){this.daxiao= this.num1+'>'+ this.num2}else {this.daxiao= this.num1+'<'+this.num2}},}})</script>

可以完成該功能

使用computed計(jì)算屬性

<script>const vm = new Vue({el:'.app',data:{msg:'computed和watch的選擇',num1:1,num2:1,daxiao:""},methods:{add1(){return this.num1++},add2(){return this.num2++}},computed:{daxiao(){if(this.num1 == this.num2){return this.num1 +'='+ this.num2}else if(this.num1 > this.num2){return this.num1+'>'+ this.num2}else {return this.num1+'<'+this.num2}}},})</script>

也能完成該功能，此種情況下選擇computed計(jì)算屬性

異步情況下

computed

 computed:{daxiao(){setTimeout(()=>{if(this.num1 == this.num2){return this.num1 +'='+ this.num2}else if(this.num1 > this.num2){return this.num1+'>'+ this.num2}else {return this.num1+'<'+this.num2}},3000)}},

無(wú)法完成比較大小的功能

這是因?yàn)?#xff0c;在異步情況下的箭頭函數(shù)由誰(shuí)調(diào)用，this就指向誰(shuí)，這里的是由javascript引擎調(diào)用的，return的時(shí)候也是把值返回給javascript引擎

watch

 watch:{num1(){setTimeout(()=>{if(this.num1 == this.num2){this.daxiao= this.num1 +'='+ this.num2}else if(this.num1 > this.num2){this.daxiao= this.num1+'>'+ this.num2}else {this.daxiao= this.num1+'<'+this.num2}},2000)},num2(){setTimeout(()=>{if(this.num1 == this.num2){this.daxiao= this.num1 +'='+ this.num2}else if(this.num1 > this.num2){this.daxiao= this.num1+'>'+ this.num2}else {this.daxiao= this.num1+'<'+this.num2}},2000)},}

在異步情況下，watch可以完成該功能

watch中異步中箭頭函數(shù)和普通函數(shù)this指向

分別在箭頭函數(shù)以及普通函數(shù)中打印this

 watch:{num1(){setTimeout(()=>{console.log(this);if(this.num1 == this.num2){this.daxiao= this.num1 +'='+ this.num2}else if(this.num1 > this.num2){this.daxiao= this.num1+'>'+ this.num2}else {this.daxiao= this.num1+'<'+this.num2}},2000)},num2(){setTimeout(function(){console.log(this);if(this.num1 == this.num2){this.daxiao= this.num1 +'='+ this.num2}else if(this.num1 > this.num2){this.daxiao= this.num1+'>'+ this.num2}else {this.daxiao= this.num1+'<'+this.num2}},2000)},}

可以看出，在箭頭函數(shù)中，this是指向Vue實(shí)例的，反而普通函數(shù)中的this指向window

在箭頭函數(shù)中，this之所以指向Vue實(shí)例是因?yàn)?#xff0c;箭頭函數(shù)是沒(méi)有this，是繼承過(guò)來(lái)的，那么在異步中，該函數(shù)是被Vue實(shí)例管理的num1調(diào)用的，所以this是指向Vue實(shí)例的

在普通函數(shù)中，this指向調(diào)用者，settimeout異步是window調(diào)用的，所以this是指向window的