????計(jì)算屬性和偵聽(tīng)器都可以監(jiān)聽(tīng)到data區(qū)數(shù)據(jù)的變化，當(dāng)數(shù)據(jù)變化時(shí)可以觸發(fā)方法的調(diào)用，從而在方法內(nèi)部可以進(jìn)行相應(yīng)的邏輯處理。

????計(jì)算屬性的語(yǔ)法格式是：computed: {}

????偵聽(tīng)器的語(yǔ)法格式是：watch: {}

一、計(jì)算屬性

????計(jì)算屬性一般是為了簡(jiǎn)化模板中的內(nèi)容，讓模板中內(nèi)容盡可能簡(jiǎn)潔。如果我們將太多的邏輯寫(xiě)在模板中，模板將會(huì)變得難以維護(hù)。

????下面舉一反例，我們將字符串逆序的邏輯寫(xiě)在模板中。

<div id="app"> <div id="example"> {{ message.split('').reverse().join('') }} div>div><script> let vm = new Vue({ el: '#app', data: { message: 'Hello World' } })script>

????如果我們將字符串逆序的邏輯抽取到計(jì)算屬性中，模板會(huì)更清晰，改造如下：

<div id="app"> <div id="example"> {{ resMsg }} div>div><script> let vm = new Vue({ el: '#app', data: { message: 'Hello World' }, computed: { resMsg() { return this.message.split('').reverse().join('') } } })script>

????我們?cè)赾omputed中聲明了一個(gè)計(jì)算屬性resMsg，通過(guò)這個(gè)屬性來(lái)接收變量message逆序之后的值。

????火眼金睛的你應(yīng)該發(fā)現(xiàn)了resMsg更像一個(gè)方法，而不像一個(gè)屬性。這是因?yàn)橛?jì)算屬性的簡(jiǎn)寫(xiě)方式導(dǎo)致，不是它的原始樣子，原始樣子如下：

computed: { resMsg: { get() { return this.message.split('').reverse().join('') } } }

????計(jì)算屬性默認(rèn)只有g(shù)et方法，當(dāng)只有g(shù)et方法時(shí)，就可以進(jìn)行簡(jiǎn)寫(xiě)。

????當(dāng)然，如果有需要，我們可以為計(jì)算屬性提供它的set方法，set方法在計(jì)算屬性的值被修改時(shí)自動(dòng)調(diào)用。這個(gè)特性一般在前后端交互時(shí)，數(shù)據(jù)格式不一致時(shí)會(huì)用到。比如時(shí)間、金錢(qián)等等在前后端的格式就通常不一樣。

????我們以錢(qián)為例來(lái)說(shuō)明一下set方法的應(yīng)用場(chǎng)景。

????通常情況下，后端為了避開(kāi)浮點(diǎn)數(shù)存儲(chǔ)不精確的問(wèn)題，會(huì)以分為單位進(jìn)行整數(shù)存儲(chǔ)。然而，前端在展示的時(shí)候，通常是以元為單位，這時(shí)兩個(gè)單位就不一致，它們相差100倍。

????現(xiàn)在前端通過(guò)接口調(diào)用，拿到的錢(qián)是100分，賦值給cents變量，該值要轉(zhuǎn)化成元在頁(yè)面上展示，我們就可以聲明一個(gè)yuan的計(jì)算屬性去實(shí)現(xiàn)。當(dāng)計(jì)算屬性yuan被修改時(shí)，對(duì)應(yīng)的分又要賦值到cents變量上，這時(shí)候set方法就派上用場(chǎng)了，代碼如下

<div id="app"> 分：{{cents}} <hr> 元：{{yuan}} <hr> 改變?cè)?#xff1a;<input type="text" v-model="yuan">div><script> let vm = new Vue({ el: '#app', data: { cents: 100 }, computed: { yuan: { get: function () { return this.cents / 100; }, set: function (newVal) { this.cents = newVal * 100 } } } })script>

????我們就通過(guò)set方法自動(dòng)被調(diào)用的特性，在方法內(nèi)部，將元轉(zhuǎn)變成分，并賦值給cents變量。

????通常情況下，我們只會(huì)用到get方法，所以簡(jiǎn)寫(xiě)形式居多，但不要把它當(dāng)做方法。它跟方法是不一樣的，方法的每次調(diào)用，方法內(nèi)部邏輯都會(huì)執(zhí)行一遍。計(jì)算屬性卻不會(huì)，它具備基于依賴(lài)的緩存能力。下面例子來(lái)證實(shí)這個(gè)現(xiàn)象。

<div id="app"> <div>{{reverseMsg}}div> <div>{{reverseMsg}}div> <hr> <div>{{reverseStr(msg)}}div> <div>{{reverseStr(msg)}}div>div><script> let vm = new Vue({ el: '#app', data: { msg: 'Hello' }, computed: { reverseMsg() { console.log('computed') return this.msg.split('').reverse().join('') } }, methods: { reverseStr() { console.log('method') return this.msg.split('').reverse().join('') } } })script>

????上面代碼中，計(jì)算屬性在模板中使用了兩次，方法調(diào)用也使用了兩次，我們查看打印發(fā)現(xiàn)

????方法中的打印語(yǔ)句執(zhí)行了兩次，而計(jì)算屬性中的打印語(yǔ)句卻只執(zhí)行了一次。這就驗(yàn)證了，計(jì)算屬性的簡(jiǎn)寫(xiě)形式雖然長(zhǎng)得跟方法一模一樣，但它確實(shí)不是方法。

二、偵聽(tīng)器

????偵聽(tīng)器也可以監(jiān)聽(tīng)到data中的數(shù)據(jù)變化，當(dāng)data中某個(gè)變量的數(shù)據(jù)發(fā)生變化時(shí)，對(duì)應(yīng)的偵聽(tīng)器方法就會(huì)被執(zhí)行，偵聽(tīng)器的方法名必須跟被偵聽(tīng)的變量名一樣。

<div id="app"> <label> 名： <input type="text" v-model="firstName"> label> <br> <label> 姓： <input type="text" v-model="lastName"> label> <br> {{fullName}}div><script> let vm = new Vue({ el: '#app', data: { firstName: 'Jim', lastName: 'Green', fullName: 'Jim Green' }, watch: { firstName(val) { console.log('firstName has changed') this.fullName = val + ' ' + this.lastName }, lastName(val) { console.log('lastName has changed') this.fullName = this.firstName + ' ' + val } } })script>

??? firstName(val)就是監(jiān)聽(tīng)firstName變化時(shí)被調(diào)用的函數(shù)，lastName(val)就是監(jiān)聽(tīng)lastName變化時(shí)被調(diào)用的函數(shù)。運(yùn)行頁(yè)面如下：

????當(dāng)我們修改firstName的值時(shí)，firstName(val)方法就會(huì)被調(diào)用，并且新值會(huì)傳遞給val變量，我們利用新值可以去更新fullName變量。

????偵聽(tīng)器的應(yīng)用場(chǎng)景通常是數(shù)據(jù)變化時(shí)需要執(zhí)行異步操作或開(kāi)銷(xiāo)較大的操作。

總結(jié)

????計(jì)算屬性和偵聽(tīng)器有相似之處，又有不同之處。相似之處是，它們都可以監(jiān)聽(tīng)到數(shù)據(jù)的變化，從而執(zhí)行自己的處理邏輯。但是它們的應(yīng)用場(chǎng)景是不一樣的，平常開(kāi)發(fā)中，計(jì)算屬性使用頻率更高。

總結(jié)

以上是生活随笔為你收集整理的vue修改计算属性的值_Vue语法高级之计算属性和侦听器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。