一、计算属性
1.计算属性
如果计算方式不能复用，且不好维护
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
所以计算方式比较复杂，或者会重复使用时，可以用计算属性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
2.计算属性的缓存设计
计算属性是基于它们的响应式依赖进行缓存的，如果数据没有发生改变，下次调用方法时会使用上一次的结果
<script>
var vm = new Vue({
computed: {
now: function () {
return Date.now()
}
}
})
</script>
如果希望每次都重新执行方法，可以使用
<script>
var vm = new Vue({
methods: {
now: function () {
return Date.now()
}
}
})
</script>
注意区分属性和方法，属性后不()
3.侦听
使用vue的watch属性可以监听自定义属性的改变
<div id="demo">{{ fullName }}</div>
<script>
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
}
}
})
</script>但使用计算属性可能会更加方便
<div id="demo">{{ fullName }}</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>4.get set
<div id="demo">{{ fullName }}</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: "tom"
},
computed: {
fullName: {
get: function () {
return this.firstName
},
set: function (value) {
console.log(value)
this.firstName=value
}
}
}
})
</script>
二、侦听
