Vue.js（2.x）之計算屬性
阿新 • • 發佈：2017-08-18
眼睛 猜想 官網文檔 data ctype 小結 isp def 直接 
等到後面睜大眼睛後發現data裏也設置了fullName，註釋掉data裏設置的fullName後，再運行並打印vm.firstName與vm.lastName，它們的值的確改變了，如右圖所示：
昨天看完大神的文章後，深感慚愧，硬著頭皮繼續看官網文檔，然而這真的沒是沒辦法，介紹的實在有些敷衍：
1）、計算屬性:也不說下computed是計算屬性關鍵詞，vm實例是可以像代理data一樣代理computed的，可以直接把其屬性當文本插值放到HTML標簽中。
2）、這裏的getter是什麽意思？
console.log()又是幹嘛用的？
vm.reversedMessage的值取決於vm.message，那反過來成立嗎？
- 查了半天資料，知乎上面的解釋全一點：getter 和 setter 方法有什麽意義？看了半天，總得自己總結下吧：getter就是用來獲取data的屬性值，並可以作修改後輸出（結合上方例子），但並不會影響data的屬性值。
- console.log()是在瀏覽器控制臺裏打印查看信息使用的函數（基礎不牢啊），有網友介紹的很詳細：http://blog.csdn.net/bcbobo21cn/article/details/51810601
- 反過來不成立，vm.reversedMessage的值取決於vm.message，但vm.reversedMessage的值單獨修改也無效，使用console.log()查看信息截圖如下：
可以清楚地看到更改vm.reversedMessage的值後，vm.message的值並沒有更改，再打印它本身，也同樣沒有修改。
不明白的地方是為何下方會出現undefined？
3）、簡單理解getter，就是會返回值（獲取值），setter就是設置屬性值。可官網上給的例子與線下測試的並不一樣：
代碼如下圖：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> </head> <style> .static { background: #444; color: #eee; width: 100px; height: 100px; } </style> <body> <div id="demo"View Code 從左圖的瀏覽器的控制臺打印信息可以看出，setter並沒有被調用，vm.firstName和vm.lastName並沒有被更新。這到底啥問題呢?>{{ fullName }}</div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: ‘#demo‘, data: { firstName: ‘Foo‘, lastName: ‘Bar‘, fullName: ‘Foo Bar‘ }, 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]; } } } }) </script> </body> </html>
等到後面睜大眼睛後發現data裏也設置了fullName，註釋掉data裏設置的fullName後，再運行並打印vm.firstName與vm.lastName，它們的值的確改變了，如右圖所示：
由此偶這麽猜想：當data裏的屬性名與計算屬性computed裏的屬性名相同時，以data裏的屬性名為主，computed裏的無效。
copy小結：
計算屬性關鍵詞: computed。
計算屬性在處理一些復雜邏輯時是很有用的。
計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。
Vue.js（2.x）之計算屬性