06avalon - vm计算属性 ($computed)

简介: 06avalon - vm计算属性 ($computed)

计算属性是监控属性的强化版,它必须依赖于 1个或多个监控属性。通过普通的监控属性实现对视图的监听,它自身的变化也由监控属性进行驱动。

计算属性集中定义在$computed对象中。有多种形式。

//函数形式的只读计算属性
avalon.define({
    $id: 'test',
    firstName: '333',
    lastName: 'xxx',
    $computed: {
        //fullName依赖于firstName与lastName
        fullName: function(){
            return this.firstName+' '+this.lastName
        },
        //xxx只依赖于firstNaem
        xxx: function(){
            return this.firstName+'!!'
        }
    }
})
//对象形式的可读写计算属性
avalon.define({
    $id: 'test',
    firstName: '333',
    lastName: 'xxx',
    $computed: {
        //fullName依赖于firstName与lastName
        fullName: {
            get: function(){
                return this.firstName+' '+this.lastName
            },
            set: function(val){
                var arr = val.split(' ')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
    }
})
目录
相关文章
|
监控 JavaScript 前端开发
05avalon - vm监控属性 ($watch)
05avalon - vm监控属性 ($watch)
71 0
|
JavaScript
04avalon - vm内部属性($id)
04avalon - vm内部属性($id)
54 0
computed【计算属性】watch【监听】methods【方法】的区别
computed【计算属性】watch【监听】methods【方法】的区别
|
19天前
|
缓存
在 setup 函数中使用 computed 计算属性
【10月更文挑战第23天】在 Vue3 中,`computed` 计算属性为我们提供了一种方便且高效的方式来处理基于其他响应式数据的派生数据。在 `setup` 函数中使用 `computed` 计算属性,可以让我们更好地组织和管理组件的逻辑。
|
1月前
|
缓存 监控 JavaScript
computed 属性和 watch 方法的性能比较
【10月更文挑战第3天】
25 4
|
1月前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
103 0
|
6月前
|
缓存 JavaScript
computed和methods的区别
computed和methods的区别
58 1
09avalon - vm是如何作用视图
09avalon - vm是如何作用视图
55 0
|
6月前
|
JavaScript
Vue中的methods、computed计算属性和watch监听属性的使用和区别
Vue中的methods、computed计算属性和watch监听属性的使用和区别
|
6月前
|
缓存 监控 JavaScript
methods、computed、watch它们的差异与区别
在Vue中,Methods、Watch和Computed是三种用于处理数据和响应数据变化的不同方式。
114 0