vue07-計算屬性/方法/偵聽器
阿新 • • 發佈：2018-12-11
有一個場景，我們定義兩個變數firstName,lastName,要自動計算出fullName。
1.我們可以用method方法計算，如下面程式碼，這樣有一個缺點，每次呼叫都要計算，firstName與lastName沒有修改，也需要計算才能拿到fullName
<!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8" /> <title>Hello world</title> <script src="vue.js"></script> </head> <body> <div id="root"> {{fullName()}} {{age}} </div> <script> var vm = new Vue({ el: "#root", data: { firstName: "xu", lastName: "haixing", age: 25 }, methods:{ fullName: function(){ return this.firstName+" "+this.lastName; } } }) </script> </body> </html>
2.vue中的computed屬性，首先vue會在data中找fullName屬性，沒有找到，便會去computed中拿，存在快取，如果依賴的屬性值沒有變化，則不會重新計算。
<!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8" /> <title>Hello world</title> <script src="vue.js"></script> </head> <body> <div id="root"> {{fullName}} {{age}} </div> <script> var vm = new Vue({ el: "#root", data: { firstName: "xu", lastName: "haixing", age: 25 }, //計算屬性 有快取，如果依賴的屬性沒有變化，不會重新計算 computed:{ fullName: function(){ console.log("計算了一次"); return this.firstName+" "+this.lastName; } } }) </script> </body> </html>
看測試，當依賴的屬性改變時，會自動計算出fullName的值
3.watch 偵聽器，也是變化時會計算，但是寫法要比computed麻煩很多，所以建議用computed計算屬性。
<!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8" /> <title>Hello world</title> <script src="vue.js"></script> </head> <body> <div id="root"> {{fullName}} {{age}} </div> <script> var vm = new Vue({ el: "#root", data: { firstName: "xu", lastName: "haixing", age: 25, fullName: "xu haixing" }, //偵聽器實現 watch: { firstName: function () { console.log("偵聽器計算了一次"); this.fullName = this.firstName + " " + this.lastName; }, lastName: function () { console.log("偵聽器計算了一次"); this.fullName = this.firstName + " " + this.lastName; } } }) </script> </body> </html>