Vue.js 計算屬性是什么
一、總結
一句話總結：
模板 表達式 維護
在模板中表達式非常便利，但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什么 Vue.js 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯，應當使用計算屬性。
1、為什么會有計算屬性？
模板 表達式 維護
在模板中表達式非常便利，但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什么 Vue.js 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯，應當使用計算屬性。
2、計算屬性的特點？
依賴 改變
依賴的值改變，計算屬性也改變
比如：下列代碼中，b的值依賴於a的值，a的值由1變成2時，b的值由2變成了3
14 <script> 15 var vm = new Vue({ 16 el: '#example', 17 data: { 18 a: 1 19 }, 20 computed: { 21 // 一個計算屬性的 getter 22 b: function () { 23 // `this` 指向 vm 實例 24 return this.a + 1 25 } 26 } 27 }) 28 29 setTimeout(function(){ 30 vm.a=2; 31 },3000); 32 33 </script>
當你在模板里把數據綁定到一個計算屬性上時，Vue 會在其依賴的任何值導致該計算屬性改變時更新 DOM。這個功能可以讓你的代碼更加聲明式、數據驅動並且易於維護。
3、vue對象如何調用？
對象 變量 調用
將對象賦值給一個變量，然后調用這個變量即可
14 <script> 15 var vm = new Vue({ 16 el: '#example', 17 data: { 18 a: 1 19 }, 20 computed: { 21 // 一個計算屬性的 getter 22 b: function () { 23 // `this` 指向 vm 實例 24 return this.a + 1 25 } 26 } 27 }) 28 29 setTimeout(function(){ 30 vm.a=2; 31 },3000); 32 33 </script>
4、vue對象中的數據如何調用？
直接 點
vue對象直接.(點)的方式
14 <script> 15 var vm = new Vue({ 16 el: '#example', 17 data: { 18 a: 1 19 }, 20 computed: { 21 // 一個計算屬性的 getter 22 b: function () { 23 // `this` 指向 vm 實例 24 return this.a + 1 25 } 26 } 27 }) 28 29 setTimeout(function(){ 30 vm.a=2; 31 },3000); 32 33 </script>
5、vue和其它js代碼的關系是怎樣的？
對象 互不干擾
vue只是js的一個對象，和其它js代碼完全是互不干擾的
14 <script> 15 var vm = new Vue({ 16 el: '#example', 17 data: { 18 a: 1 19 }, 20 computed: { 21 // 一個計算屬性的 getter 22 b: function () { 23 // `this` 指向 vm 實例 24 return this.a + 1 25 } 26 } 27 }) 28 29 setTimeout(function(){ 30 vm.a=2; 31 },3000); 32 33 </script>
6、什么時候適合用計算屬性，什么時候適合用$watch？
計算屬性 對象中 多屬性
$watch 對象外 單屬性
場景描述：
一個人的全名（fullname）由firstName和lastName組成，比如現在有一個需求，firstName和lastName改變的時候，全名也跟着改變，如何實現？
解決方法：
$watch解決：
<div id="demo">{{fullName}}</div>var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' } }) vm.$watch('firstName', function (val) { this.fullName = val + ' ' + this.lastName }) vm.$watch('lastName', function (val) { this.fullName = this.firstName + ' ' + val })
計算屬性解決：
var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })
顯然這里計算屬性解決更優，不過計算屬性是在Vue對象里面解決的，$watch是在對象外面解決的，計算屬性更加簡潔，但是$watch感覺靈活一點
7、vue中的$watch函數的運行機制是怎樣的？
監控 屬性
看下面的代碼可以知道，$watch是監控屬性的，$watch監控的屬性改變，$watch也跟着改變，代碼中的示例是$watch一次監控一個屬性
場景描述：
一個人的全名（fullname）由firstName和lastName組成，比如現在有一個需求，firstName和lastName改變的時候，全名也跟着改變，如何實現？
解決方法：
$watch解決：
<div id="demo">{{fullName}}</div>var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' } }) vm.$watch('firstName', function (val) { this.fullName = val + ' ' + this.lastName }) vm.$watch('lastName', function (val) { this.fullName = this.firstName + ' ' + val })
8、一個人的全名（fullname）由firstName和lastName組成，比如現在有一個需求，firstName和lastName改變的時候，全名也跟着改變，並且，全名變了的話，firstName和lastName也自動跟着改變，如何實現？
計算屬性 get set
用計算屬性的getter和setter實現
get方法用於firstName和lastName改變的時候，全名也跟着改變
set方法用於全名變了的話，firstName和lastName也自動跟着改變
具體調用的話可以用vue對象調用fullname、firstName、lastName進行驗證
1 // ... 2 computed: { 3 fullName: { 4 // getter 5 get: function () { 6 return this.firstName + ' ' + this.lastName 7 }, 8 // setter 9 set: function (newValue) { 10 var names = newValue.split(' ') 11 this.firstName = names[0] 12 this.lastName = names[names.length - 1] 13 } 14 } 15 } 16 // ...
現在在調用 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會有相應更新。
二、Vue.js 計算屬性
1、效果動圖
2、代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>wue01</title> 7 <script src="vue.min.js"></script> 8 </head> 9 <body> 10 <div id="example"> 11 a={{ a }}, b={{ b }} 12 </div> 13 </body> 14 <script> 15 var vm = new Vue({ 16 el: '#example', 17 data: { 18 a: 1 19 }, 20 computed: { 21 // 一個計算屬性的 getter 22 b: function () { 23 // `this` 指向 vm 實例 24 return this.a + 1 25 } 26 } 27 }) 28 29 setTimeout(function(){ 30 vm.a=2; 31 },3000); 32 33 </script> 34 </html>
計算屬性
在模板中表達式非常便利，但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什么 Vue.js 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯，應當使用計算屬性。
當你在模板里把數據綁定到一個計算屬性上時，Vue 會在其依賴的任何值導致該計算屬性改變時更新 DOM。這個功能可以讓你的代碼更加聲明式、數據驅動並且易於維護。
基礎例子
<div id="example"> a={{ a }}, b={{ b }} </div>var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { // 一個計算屬性的 getter b: function () { // `this` 指向 vm 實例 return this.a + 1 } } })結果：
{% raw %}
<div id="example" class="demo"> a={{ a }}, b={{ b }} </div> <script> var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { b: function () { return this.a + 1 } } }) </script> {% endraw %}這里我們聲明了一個計算屬性 b。我們提供的函數將用作屬性 vm.b的 getter。
console.log(vm.b) // -> 2 vm.a = 2 console.log(vm.b) // -> 3你可以打開瀏覽器的控制台，修改例子的 vm。vm.b 的值始終取決於 vm.a 的值。
你可以像綁定普通屬性一樣在模板中綁定計算屬性。Vue 知道 vm.b 依賴於 vm.a，因此當 vm.a 發生改變時，依賴於 vm.b 的綁定也會更新。而且最妙的是我們是聲明式地創建這種依賴關系：計算屬性的 getter 是干凈無副作用的，因此也是易於測試和理解的。
計算屬性 vs. $watch
Vue.js 提供了一個方法 $watch，它用於觀察 Vue 實例上的數據變動。當一些數據需要根據其它數據變化時， $watch 很誘人 —— 特別是如果你來自 AngularJS。不過，通常更好的辦法是使用計算屬性而不是一個命令式的 $watch 回調。考慮下面例子：
<div id="demo">{{fullName}}</div>var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' } }) vm.$watch('firstName', function (val) { this.fullName = val + ' ' + this.lastName }) vm.$watch('lastName', function (val) { this.fullName = this.firstName + ' ' + val })上面代碼是命令式的重復的。跟計算屬性對比：
var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })更好，不是嗎？
計算 setter
計算屬性默認只是 getter，不過在需要時你也可以提供一個 setter：
// ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ...現在在調用 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會有相應更新。
參考：Vue.js 計算屬性_w3cschool
https://www.w3cschool.cn/vuejs/srfd1js2.html