计算属性深层次介绍
问题:计算属性在使用的时候为什么只放在双大括号里,不用加括号,就可以直接调用了呢?
答:计算属性部分定义的变量只是一个属性,并不是一个函数,如果你看到这个情况属性名:function()
,这只是计算属性定义的一个缩写。计算属性定义时包含set和get两个方法,我们一般不写set方法,这样可以认为定义的计算属性对其他变量的操作是只读的,并不会更改其他变量的值,并且在定义只含有get方法时的计算变量时,可以简写为:属性名:function(){}
。
定义计算属性变量实例
代码介绍:代码中详写了计算属性定义时需要重写的set和get函数,一般可以省略set函数。set方法作用:通过控制台更改代码中totalName的值,并将更改传递到firstName和lastName中;get方法作用:获取firstName和lastName的组合值totalName。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
<h2>姓名: {{totalName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',//挂载要管理的元素
data:{
firstName:'Adobe',
lastName:'Broud'
},
computed:{
//下面写的为计算属性的完整代码,计算属性一般不写set方法,这时属性为只读属性
totalName:{
set:function(newValue){
const names=newValue.split(' ');
this.firstName=names[0];
this.lastName=names[1];
},
get:function(){
return this.firstName+' '+this.lastName
}
}
},
})
</script>
</body>
</html>
浏览器运行截图:
浏览器上原本显示结果为:Adobe Broud,经过我手动从控制台修改totalName变量后,显示如上图所示。
计算属性与methods方式区别
表面上看着通过计算属性(computed)和methods方式来计算vue中需要变换的数据值都很简单,可它们在计算效率上却大有不同,通过计算属性计算时会留有数据缓存,当需要计算多次时,如果变量没有变化的话只需计算一次,而通过methods方式则是每调用一次就会计算一次。
代码介绍:目的想要显示5次两个名字的组合值,我分别通过computed和methods方式,并在每个方法中写上在控制台打印。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
<h5>姓名: {{totalName}}</h5>
<h5>姓名: {{totalName}}</h5>
<h5>姓名: {{totalName}}</h5>
<h5>姓名: {{totalName}}</h5>
<h5>姓名: {{totalName}}</h5>
<h5>姓名: {{getTotalName()}}</h5>
<h5>姓名: {{getTotalName()}}</h5>
<h5>姓名: {{getTotalName()}}</h5>
<h5>姓名: {{getTotalName()}}</h5>
<h5>姓名: {{getTotalName()}}</h5>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',//挂载要管理的元素
data:{
firstName:'Adobe',
lastName:'Broud'
},
computed:{
//下面写的为计算属性的完整代码,计算属性一般不写set方法,这时属性为只读属性
totalName:function(){
console.log('computed!')
return this.firstName+' '+this.lastName
}
},
methods:{
getTotalName:function(){
console.log('methods!')
return this.firstName+' '+this.lastName
}
}
})
</script>
</body>
</html>
浏览器运行结果: