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]
            }
        }
    }
})
目录
相关文章
|
11月前
|
监控 JavaScript 前端开发
05avalon - vm监控属性 ($watch)
05avalon - vm监控属性 ($watch)
61 0
|
11月前
|
JavaScript
04avalon - vm内部属性($id)
04avalon - vm内部属性($id)
48 0
computed【计算属性】watch【监听】methods【方法】的区别
computed【计算属性】watch【监听】methods【方法】的区别
|
2月前
|
JavaScript
Vue computed自动计算对象中的属性
Vue computed自动计算对象中的属性
39 0
|
3月前
|
缓存 监控 JavaScript
Vue.js中的计算属性 computed 与监听属性 watch深入探索
Vue.js中的计算属性 computed 与监听属性 watch深入探索
168 0
|
10月前
|
缓存 JavaScript
vue的计算属性和watch的区别
vue的计算属性和watch的区别
61 0
|
4月前
|
缓存 JavaScript 前端开发
Vue的计算属性和侦听器:computed和watch的使用
【4月更文挑战第24天】Vue.js框架中的计算属性和侦听器是处理数据变化的关键特性。计算属性(computed)基于依赖缓存,仅在相关数据改变时重新计算,适合处理复杂逻辑。例如,计算总价可基于价格和数量动态更新。而侦听器(watch)在数据变化时执行回调,适用于异步操作和开销大的任务。计算属性与侦听器的主要区别在于缓存机制和应用场景,前者用于同步计算,后者用于响应数据变化后的特殊操作。理解这两者有助于优化Vue应用的性能。
|
4月前
|
JavaScript
Vue中的methods、computed计算属性和watch监听属性的使用和区别
Vue中的methods、computed计算属性和watch监听属性的使用和区别
|
4月前
|
API
Vue3中computed计算属性函数
Vue3中computed计算属性函数
71 1
|
4月前
|
缓存 监控 JavaScript
methods、computed、watch它们的差异与区别
在Vue中,Methods、Watch和Computed是三种用于处理数据和响应数据变化的不同方式。
103 0