基础入门:vue.js计算属性和方法的区别
1、计算属性的使用及methods的区别
- methonds:程序每次运行都会执行一次;
- computed:计算属性,依赖不变,每次调用不会重新计算,大大提高执行性能。
源代码:
<script>
export default{
data(){
return{
massage:'你好,世界!',
age:0
}
},
computed:{//计算属性,依赖不变,不会重新计算,大大提高执行性能
reverseMsg:function(){
console.log('计算属性');
return this.massage.split('').reverse().join('')
}
},
methods:{
reverseMssag:function(){
console.log('methods');
return this.massage.split('').reverse().join('')
}
}
}
</script>
<template>
<p>{{massage}}</p>
<span></span>
<!-- 用js表达式 -->
<p>{{massage.split('').reverse().join('')}}</p>
<p>{{massage.split('').reverse().join('')}}</p>
<p>{{massage.split('').reverse().join('')}}</p>
<!-- 用计算属性 -->
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<!-- 调用方法 -->
<p>{{reverseMssag()}}</p>
<p>{{reverseMssag()}}</p>
<p>{{reverseMssag()}}</p>
<button @click="massage='志在成功'">改变依赖值</button>
</template>
<style>
</style>
源代码运行情况:
2、计算属性中get和set的区别
- get:随着计算属性的调用而被调用;
- set:在设置或更改计算属性时被调用;
源代码:
<script>
export default{
data(){
return{
massage:'你好,世界',
age:0
}
},
computed:{//计算属性,依赖不变,不会重新计算,大大提高执行性能
//简写
// reverseMsg:function(){
// console.log('计算属性');
// return this.massage.split('').reverse().join('')
// }
//完整写法
reverseMsg:{
set:function(newValue){//在设置或更改计算属性时调用
console.log('newValue');
this.massage=newValue
},
get:function(){
return this.massage.split('').reverse().join('')
}
}
},
methods:{
reverseMssag:function(){
console.log('methods');
return this.massage.split('').reverse().join('')
}
}
}
</script>
<template>
<p>{{massage}}</p>
<span></span>
<!-- 用js表达式 -->
<p>{{massage.split('').reverse().join('')}}</p>
<p>{{massage.split('').reverse().join('')}}</p>
<p>{{massage.split('').reverse().join('')}}</p>
<!-- 用计算属性 -->
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<p>{{reverseMsg}}</p>
<!-- 调用方法 -->
<p>{{reverseMssag()}}</p>
<p>{{reverseMssag()}}</p>
<p>{{reverseMssag()}}</p>
<button @click="massage='志在成功'">改变依赖值</button>
<button @click="reverseMsg='成功'">改变reverseMsg</button>
</template>
<style>
</style>
源代码运行情况: