vue 计算属性，方法，侦听器

一、计算 属性
二、 方法
三、侦听器
一、计算 属性
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

        注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
        computed: {
          aDouble: vm => vm.a * 2
        }
1
2
3
4
计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性)在该实例范畴之外，则计算属性是不会被更新的。

        计算属性：通过已有的属性 可以 计算出 的属性可以省略不定义，用这种方法
        好处：解决 属性的冗杂
1
2
举个栗子：这样就可以通过计算属性来得到 fullname 这个属性，不用定义
        var app = new Vue({
                el: "#app",
                data: {
                        firstName: 'zhang',
                        lastName: 'san',
                        // fullName: 'zhangsan'
                },
                // 计算属性
                computed:{
                        fullName: function () {
                                return  this.firstName + this.lastName;
                        }
                }
        })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
二、 方法
这里我就说一下 方法 和 计算属性的差异

        如果 是 只要不变的情况下，由于 计算属性有缓存机制，只要 属性不变，方法就不会被再执行
        如果使用 方法的话，每次方法都要执行，所以推荐使用 计算属性
1
2
var app = new Vue({
                el: "#app",
                data: {
                        firstName: 'zhang',
                        lastName: 'san',
                        // fullName: 'zhangsan'
                },
                // 方法
                methods:{
                        fullName: function () {
                                return  this.firstName + this.lastName;
                        }
                }
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
三、侦听器
当 监听 属性发生变化时，监听器才会 被执行，并更新 属性

var app = new Vue({
        el: "#app",
        data: {
                firstName: 'zhang',
                lastName: 'san',
                fullName: 'zhangsan'
        },
        // 监听器
        watch: {
                firstName: function () {
                        this.fullName = this.firstName + this.lastName;
                },
                lastName: function () {
                        this.fullName = this.firstName + this.lastName;
                }
        }
})