1-9 Vue的計算屬性

weixin_33936401發表於2017-09-05
Vue

Vue的計算屬性（computed properties）

  • <strong>起因？</strong>

    • 雖然在模板中繫結表示式是非常便利的，但是它們實際上只用於簡單的操作。在模板中放入太多的邏輯會讓模板過重且難以維護。比如：
    <div id="example">
   {{ message.split('').reverse().join('') }}
</div>
    • 這樣，模板不再簡單和清晰。在實現反向顯示 message 之前，你應該通過一個函式確認它。
    • 所以，Vue.js提供了 <strong>計算屬性</strong> 來讓我們去處理例項中的複雜邏輯。

  • 計算屬性 (computed properties) 就是不存在於原始資料中，而是在執行時實時計算出來的屬性。

  • 案例如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>計算屬性</title>
</head>
<body>
   <div id="app">
       <p>{{fullname}}</p>
       <p>{{reverse}}</p>
   </div>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            firstname: '張',
            lastname: '三豐'
        },
        // 計算屬性選項
        computed: {
            fullname: function () {
                return this.firstname + this.lastname;
            },
            reverse: function () {
                return (this.firstname
                + this.lastname).split('').reverse().join('');
            }
        }
    })
</script>
</body>
</html>

  • 在上面的案例中，計算屬性fullname 和 reverse的值始終取決於firstname 和 lastname。計算屬性預設只有 getter ，當然在需要時我們也可以提供一個 setter 。計算屬性被設計出來的目的在於：getter 是乾淨無副作用的。

  • 計算屬性 和 Methods的區別？

    • 當頁面重新渲染（不是重新整理）的時候，計算屬性不會變化，直接讀取快取使用，適合較大量的計算和改變頻率較低的屬性；而method，就是當頁面重新渲染的時候（頁面元素的data變化，頁面就會重新渲染），都會重新呼叫method。

    • 如果不希望有快取，我們可以用method取代computed。

    疑惑：為什麼需要快取？

    假設我們有一個重要的計算屬性 A ，這個計算屬性需要一個巨大的陣列遍歷和做大量的計算。然後我們可能有其他的計算屬性依賴於 A 。如果沒有快取，我們將不可避免的多次執行 A 的 getter ！

  • <strong>計算屬性的setter方法</strong>

    • 計算屬性預設只有 getter ，不過在需要時你也可以提供一個 setter ：
     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
   <div id="app">
       <p>{{ fullName }}</p>
   </div>
 <script src="js/vue.js"></script>
 <script>
     var app = new Vue({
         el: '#app',
         data: {
             firstName: 'Tom',
             lastName: 'Jack'
         },
         computed: {
             fullName: {
                 // get方法
                 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>
    • 執行結果：
126164-586374cd52dc8066.png
vuea10.png

相關文章