JavaEEHTML&JS+前端大数据人工智能开发Python+大数据开发UI/UE设计软件测试新媒体+短视频直播运营产品经理C/C++Linux云计算+运维开发拍摄剪辑+短视频制作PMP项目管理认证电商运营Go语言与区块链PHP工程师iOSAndroid+物联网.NET

【Web前端】vue 计算属性,方法,侦听器

来源:黑马程序员

浏览10367人

2019.05.09

文章结构
一、计算 属性
二、 方法
三、侦听器
一、计算 属性
计算属性将被混入到 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;
                }
        }
})


收藏文章

分享