computed 计算
- 当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性。
- data中可以没有声明就直接使用,必须使用return返回
<p id="app"> {{fullName}} </p>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
- 默认只有getter,可自行设置setter
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var nameArr = newValue.split(' ')
this.firstName = nameArr[0]
this.lastName = nameArr[nameArr.length - 1]
}
}
}
- 具有缓存性,如果依赖的属性没有数据变化,computed会直接从缓存中获取之前计算好的值
- 通常一个数据受多个数据影响时使用
watch 监听
- 当页面需要监听一个属性变化作出相应逻辑处理时使用。
- 监听的属性在data中必须有申明,不是必须要有return返回。
- watch为一个对象,键是需要观察的属性,值是对应的回调函数/方法名/包含选项的对象。
var vm = new Vue({
el: '#app',
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
}
}
})
- 不具备缓存性,每次观察都需要重新监听获取
- 一般一个数据影响多个数据时使用
methods 方法
- 成员是一些事件或者函数,需要条件触发(生命周期、点击等等)。
- 主要用于一些复杂的业务逻辑。