Vuejs --04 计算属性

Posted 2020-10-02 霓好

一、使用原因

     1、模板中表达式很便利，但实际上只适用于简单的运算，不适宜放入太多逻辑运算，例如：

<div id="example">
{{ message.split(‘‘).reverse().join(‘‘) }}
</div>

     所以： 任何复杂逻辑，你都应当使用计算属性

 

二、使用方法

<div id="app">
     你好{{ ComMessage }}
     <p>{{ ComMsg() }}</p>
</div>
 
 
var vm = new Vue({
     el: ‘#app‘,
     data: {
          message: ‘hello world‘
     },
     computed: {
          ComMessage: function(){
               return this.message.split(‘‘).reverse().join(‘‘);     //this 指向vm实例
          }
     },
     method: {
          ComMsg: function(){
               return this.message.split(‘‘).reverse().join(‘‘);     //this 指向vm实例              
          }
     }
});

 

三、计算属性 VS 函数方法methods

     1、同：如上例子，结果都是一样

     2、异：计算属性能基于它们的依赖进行缓存， 计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结               果，而不必再次执行函数。

//意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
computed: {
     now: function () {
          return Date.now()
     }
}

     3、综上，使用计算属性还是methods，取决于是否希望有缓存

 

四、computed属性 VS watch属性

<div id="demo">{{ fullName }}</div>
 
======================================================
var vm = new Vue({
    el: ‘#demo‘,
    data: {
        firstName: ‘Foo‘,
        lastName: ‘Bar‘,
        fullName: ‘Foo Bar‘
    },
    watch: {
        firstName: function(val) {
            this.fullName = val + ‘ ‘ + this.lastName
        },
        lastName: function(val) {
            this.fullName = this.firstName + ‘ ‘ + val
        }
    }
})
 
=======================================================
var vm = new Vue({
    el: ‘#demo‘,
    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]
            }
        }
    }
    // ...

 

六、Watchers      当你想要在数据变化响应时，执行异步操作或开销较大的操作，很有用。