18Vue - 计算属性(计算属性 vs Watched Property)
2023-09-11 14:15:43 时间
Vue.js 提供了一个方法 $watch
,它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时, $watch
很诱人 —— 特别是如果你来自 AngularJS
。不过,通常更好的办法是使用计算属性而不是一个命令式的 $watch
回调。思考下面例子:
HTML:
<div id="demo">{{ fullName }}</div>
JS:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
上面代码是命令式的和重复的。跟计算属性对比:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
相关文章
- CAGradientLayer的一些属性解析
- Runtime(动态添加属性)
- 当css属性width设为100%时
- Android之布局属性
- python封装之property装饰器代码示例:将一个get方法,转换为对象的属性
- Atitit spring 定时器 CRON表达式 含义 目录 1.1. 大概流程1 1.2. 核心源码springboot1 1.3. Cron表达式属性——String2 1.4
- java 反射设置属性 案例
- 【MATLAB】基本绘图 ( 句柄值 | 对象句柄值获取 | 创建对象时获取句柄值 | 函数获取句柄值 | 获取 / 设置 对象属性 | 获取对象属性 )
- 行测图形推理笔记-元素置换、叠加运算、曲直属性、开闭属性
- Android中visibility属性VISIBLE、INVISIBLE、GONE的区别
- Vue中计算属性computed与method的区别
- Android 10.0 系统settings系统属性控制一级菜单显示隐藏
- 安卓列出连接设备的所有服务UUID和特征属性UUID