????計算屬性和偵聽器都可以監聽到data區數據的變化，當數據變化時可以觸發方法的調用，從而在方法內部可以進行相應的邏輯處理。

????計算屬性的語法格式是：computed: {}

????偵聽器的語法格式是：watch: {}

一、計算屬性

????計算屬性一般是為了簡化模板中的內容，讓模板中內容盡可能簡潔。如果我們將太多的邏輯寫在模板中，模板將會變得難以維護。

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

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

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

<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>

????我們在computed中聲明了一個計算屬性resMsg，通過這個屬性來接收變量message逆序之后的值。

????火眼金睛的你應該發現了resMsg更像一個方法，而不像一個屬性。這是因為計算屬性的簡寫方式導致，不是它的原始樣子，原始樣子如下：

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

????計算屬性默認只有get方法，當只有get方法時，就可以進行簡寫。

????當然，如果有需要，我們可以為計算屬性提供它的set方法，set方法在計算屬性的值被修改時自動調用。這個特性一般在前后端交互時，數據格式不一致時會用到。比如時間、金錢等等在前后端的格式就通常不一樣。

????我們以錢為例來說明一下set方法的應用場景。

????通常情況下，后端為了避開浮點數存儲不精確的問題，會以分為單位進行整數存儲。然而，前端在展示的時候，通常是以元為單位，這時兩個單位就不一致，它們相差100倍。

????現在前端通過接口調用，拿到的錢是100分，賦值給cents變量，該值要轉化成元在頁面上展示，我們就可以聲明一個yuan的計算屬性去實現。當計算屬性yuan被修改時，對應的分又要賦值到cents變量上，這時候set方法就派上用場了，代碼如下

<div id="app"> 分：{{cents}} <hr> 元：{{yuan}} <hr> 改變元：<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>

????我們就通過set方法自動被調用的特性，在方法內部，將元轉變成分，并賦值給cents變量。

????通常情況下，我們只會用到get方法，所以簡寫形式居多，但不要把它當做方法。它跟方法是不一樣的，方法的每次調用，方法內部邏輯都會執行一遍。計算屬性卻不會，它具備基于依賴的緩存能力。下面例子來證實這個現象。

<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>

????上面代碼中，計算屬性在模板中使用了兩次，方法調用也使用了兩次，我們查看打印發現

????方法中的打印語句執行了兩次，而計算屬性中的打印語句卻只執行了一次。這就驗證了，計算屬性的簡寫形式雖然長得跟方法一模一樣，但它確實不是方法。

二、偵聽器

????偵聽器也可以監聽到data中的數據變化，當data中某個變量的數據發生變化時，對應的偵聽器方法就會被執行，偵聽器的方法名必須跟被偵聽的變量名一樣。

<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)就是監聽firstName變化時被調用的函數，lastName(val)就是監聽lastName變化時被調用的函數。運行頁面如下：

????當我們修改firstName的值時，firstName(val)方法就會被調用，并且新值會傳遞給val變量，我們利用新值可以去更新fullName變量。

????偵聽器的應用場景通常是數據變化時需要執行異步操作或開銷較大的操作。

總結

????計算屬性和偵聽器有相似之處，又有不同之處。相似之處是，它們都可以監聽到數據的變化，從而執行自己的處理邏輯。但是它們的應用場景是不一樣的，平常開發中，計算屬性使用頻率更高。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。