1、计算属性 computed
当依赖数据发生变化时,计算属性会被重新计算。
有且只有在依赖数据发生变化时它才会重新计算,其他的数据变化对计算属性。
应用场景:数据的计算显示、v-for用v-if的计算。
<div id="example">
<div id="demo">{{ fullName }}</div>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
firstName: 'Hello',
lastName: 'Word'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
2、侦听器 watch
当监听的数据变化时监听函数被执行。
应用场景:数据变更需要变更其他数据。
<div id="example">
<div id="demo">{{ fullName }}</div>
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Hello',
lastName: 'Word',
fullName: 'Hello Word'
},
watch: {
firstName: function (newVal, oldVal) {
this.fullName = newVal + ' ' + this.lastName
},
lastName: function (newVal, oldVal) {
this.fullName = this.firstName + ' ' + newVal
}
}
})
</script>
3、计算属性和侦听器的区别
1、计算属性可以简化差值表达式写法;
2、计算属性变量定义在computed中,可以直接使用在{}中的,跟methods中函数类似,只不过有利于缓存,性能更好;
3、计算属性可以防止监听属性的滥用,但一些异步请求,计算属性做不到,还得watch来完成。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)