vue-計算屬性
阿新 • • 發佈：2018-11-02
計算屬性：
資料一般都是儲存在data物件中，但是如果我們想要對這個data資料進行處理，然後顯示處理後的資料，但是又由於其他地方可能還在引用資料原來的樣子，如果我們直接在data裡處理，就會導致所有使用該資料的節點全部發生變化。另外，吐過在插值表示式中，寫處理則會導致大量重複的程式碼，而且差值表示式之中是不可以寫複雜運算，這時就需要用到計算屬性。
計算屬性為啥不用括號闊起來？
因為使用計算屬性裡的屬性，實際上是預設呼叫該屬性的get方法，因此無需使用括號，計算屬性提供各種屬性的getter方法和setter方法。
計算屬性和函式的區別？
計算屬性：計算屬性會對計算的結果進行快取，在計算的條件沒有發生變化的情況下，每一次呼叫計算屬性的屬性都直接訪問快取結果，而不需要重新計算。這樣做，對複雜計算和大量的運算起到了很好的優化作用。
函式： 函式無論呼叫多少次，都會重新計算，影響效能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.js"></script> </head> <body> <div id="app"> {{message}} {{reverMessage}} {{reverMessage}} </div> </body> </html> <scirpt> var vm = new Vue({ el:"#app", data:{ message:"hello clover!", temp:"" }, computed:{ reverMessage(){ return this.message.split("").reverse().join("") } } }) </script>