vue学习笔记4： 计算属性、方法、侦听器

1 计算属性

计算属性的设计是因为在模板中写过多的逻辑会让模板过重且难以维护。

计算属性写在computed中，是一个函数，需要将属性return出来使用。

计算属性具有缓存机制，当计算属性依赖的值没有发生改变的时候，计算属性只计算一次，这样有助于提高性能。

computed: {
    name: function() {
        return this.a + '' + this.b
    }
}

计算属性的get、set,可以在数据的获取或是改变时候对数据进行操作

computed: {
    name: {
        get: function() {
            return this.a + '' + this.b
        },
        set: function(value) {
           console.log(value) //可对传过来的value值进行操作
        }
    }
}

2 方法

在methods里面一样可以实现类似计算属性的效果，不过调用时候需要以方法的形式调用，name();

在方法里面不具有缓存机制。

在计算属性和方法都可以实现的时候，计算属性优先选择。

methods: {
    name: function() {
        return this.a + '' + this.b
    }
}

3 侦听器

侦听器是观察定义的依赖，如例子所示，当a或b发生改变时，this.name会重新计算，也具备缓存机制。但是watch写法较computed来说比较复杂，一般能用computed尽量用computed.

watch: {
    a: function() {
        this.name = this.a + '' + this.b
    },
    b: function() {
        this.name = this.a + '' + this.b
    }
}