我們都知道在Vue構造函數的參數對象中有一個【data】屬性，該屬性值是一個對象，該對象是對數據的代理，是一個鍵值對并且時刻與頁面表現是一致的，但是這里面只能是簡單的鍵值對，不能擁有業務邏輯，并且由于【data】中的屬性屬于同一個生命周期，所以如果我們需要某一個屬性是依賴于另外一個屬性時，在【data】中是做不到的，于是Vue為我們提供了【計算屬性】
一、計算屬性
1.1 概述
計算屬性歸根結底也是屬性，它也是跟表現層是時刻同步的，雖然我們可以在插值中對數據進行各種處理，但是插值中的表達式處理畢竟只能用于簡單的運算，不能擁有太多的業務邏輯。
<body> <div id="app"> <h1>{{name.toUpperCase()}}</h1> <!-- <h1>BLUE</h1> --> </div></body><script> let vm = new Vue({ el: "#app", data: { name: 'blue' } })</script>上面代碼是我們熟悉的在插值中使用表達式，但是這里面我們不能寫入業務代碼。
1.2 計算屬性語法
在構造函數的參數對象中有一個【computed】屬性，該屬性就是用于定義計算屬性的，該對象中的【鍵】也就是我們的計算屬性，與【data】不同的是，計算屬性的鍵值是一個【擁有返回值的函數】，該函數中可以訪問到【data】中的所有屬性。
<body> <div id="app"> <h1>{{rs}}</h1> <!-- <h1>BLUE LOVE PINK</h1> --> </div></body><script> let vm = new Vue({ el: "#app", data: { hs: 'BLUE', wf: "PINK" }, computed: { rs:function(){ return `${this.hs} LOVE ${this.wf}` } } })</script>上面代碼屬性【rs】是定義的一個計算屬性,該屬性值是通過【data】中的兩個屬性值計算得到，返回一個拼接的字符串（這兒使用了ES6的【模板字符串】）并且當【data】中的相關值變化之后，【rs】屬性都會進行重新計算。
可能剛開始對計算屬性會有些疑惑，比如上面的例子我把代碼寫成下面這樣子也是可以的
<body> <div id="app"> <h1>{{hs}} LOVE {{wf}}</h1> <!-- <h1>BLUE LOVE PINK</h1> --> </div></body><script> let vm = new Vue({ el: "#app", data: { hs: 'BLUE', wf: "PINK" } })</script>上面的代碼運行效果和我們使用計算屬性的效果是一樣的，但是這樣的寫法只適用于簡單的處理，【計算屬性可以處理更復雜的業務邏輯】，比如我們根據【data】中的一個屬性值進行數據請求用于構建一個屬性，我們就必須使用計算屬性了。
新聞熱點
疑難解答
圖片精選
