- 方法func计算得到的结果不会被系统缓存,每当数据有变化就会重新计算
<body>
<div id="root">
<div>{{fullName()}}</div>
<!-- 方法想在插值表达式进行调用的时候,需要在后面加括号 -->
<div>{{age}}</div>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
firstName:"Z",
lastName:"Ryan",
age:18
},
methods: {
fullName:function(){
console.log('count 1')
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
运行结果截图:
- 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。
<body>
<div id="root">
<div>{{fullName}}</div>
<!-- 调用computed属性时,直接写属性名即可 -->
<div>{{age}}</div>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
firstName:"Z",
lastName:"Ryan",
age:18
},
computed: {
fullName:function(){
console.log('count 1')
return this.firstName + ' ' + this.lastName
}
},
})
</script>
</body>
运行结果截图:
- 侦听器watch是一个对象,键是需要观察的表达式,值是对应回调函数。
(值也可以是方法名,或者包含选项的对象。)
Vue 实例会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
<body>
<div id="root">
<div>{{fullName}}</div>
<!-- 调用computed属性/侦听器watch时,直接写属性名即可 -->
<div>{{age}}</div>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
firstName:"Z",
lastName:"Ryan",
fullName:"Z Ryan",
age:18
},
watch: {
firstName:function(){
console.log('count 1')
this.fullName = this.firstName + ' ' + this.lastName
},
lastName:function(){
console.log('count 1')
this.fullName = this.firstName + ' ' + this.lastName
}
},
})
</script>
</body>
运行结果截图:
总结:当一个功能通过方法、计算属性、侦听器都能实现的时候,首选计算属性computed,不仅有缓存机制,减少系统计算量,性能高,而且代码简洁。