计算属性
Posted qt2019
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了计算属性相关的知识,希望对你有一定的参考价值。
计算属性
1.1 什么是计算属性:
插值表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护,这时应该使用计算属性。
插值表达式里的值是JS表达式
所有的计算属性都以函数的形式写在Vue实例内的computed选项内,最终返回计算后的结果。
<!--
将123,456 值反转 456,123
-->
<div id="app">
<!-- 插值表达式用法 -->
{{ text.split(',').reverse().join(',') }}
<!-- 插值表达式用法 -->
<!-- 计算属性用法 -->
{{ reversedText }}
<!-- 计算属性用法 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
text:'123,456'
},
computed: {
reversedText:function(){
return this.text.split(',').reverse().join(',');
}
},
});
</script>
1.2 计算属性的用法
在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数等,只要最终返回一个结果就可以。
计算属性可以以来多个Vue实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。
<div id="app">
总价:{{ prices }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
package1:[
{
name:'iPhone 7',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
},
{
name:'iPhone 7 Plus',
price:8239,
count:5
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'banana',
price:2,
count:10
}
]
},
computed: {
prices:function(){
let prices = 0;
for(let i = 0;i<this.package1.length;i++){
prices += this.package1[i].price * this.package1[i].count;
}
for(let i = 0;i<this.package2.length;i++){
prices += this.package2[i].price * this.package2[i].count;
}
return prices;
}
},
});
</script>
我们在控制台 vm.package1[0].count = 3; 总价的值就会相应的改变
每一个计算属性都包含一个getter和一个setter,上面都是计算属性的默认用法,只是利用了getter来读取。
<div id="app">
姓名:{{ fullName }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
firstName:'Jack',
lastName:'Green'
},
computed: {
fullName:{
get:function(){
return this.firstName+' '+this.lastName;
},
set:function(newValue){
let names = newValue.split(' ');
this.firstName = names[0];
this.lastName =names[names.length - 1];
}
}
},
});
</script>
在你需要时,也可以提供一个setter函数,当手动修改计算属性的值就像修改一个普通数据那样时,就会触发setter函数,执行一些自定义的操作。
app.fullName = ‘Ross Joe‘;
<div id="app">
姓名:{{ fullName }}
复姓:{{ FXName }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
firstName:'Jack',
lastName:'Green'
},
computed: {
fullName:{
get:function(){
return this.firstName+' '+this.lastName;
},
set:function(newValue){
let names = newValue.split(' ');
this.firstName = names[0];
this.lastName =names[names.length - 1];
}
},
FXName:function(){
return 'zhuge '+this.fullName;
}
},
});
</script>
计算属性可以依赖其他计算属性
<div id="app1">
</div>
<div id="app2">
{{ reversedText }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app1 =new Vue({
el:'#app1',
data:{
text:'123,456'
}
});
var app2 =new Vue({
el:'#app2',
computed: {
reversedText:function(){
return app1.text.split(',').reverse().join(',');
}
},
});
</script>
计算属性可以依赖当前Vue实例的数据,还可以依赖其他实例的数据
这样的用法在组件和组件话里会用到
1.3 计算属性缓存
<div id="app">
<!-- 插值表达式用法 -->
{{ text.split(',').reverse().join(',') }}
<!-- 插值表达式用法 -->
<!-- 计算属性用法 -->
{{ reversedText }}
<!-- 计算属性用法 -->
<!-- 方法用法 -->
{{ reversedMText() }}
<!-- 方法用法 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
text:'123,456'
},
methods:{
reversedMText(){
return this.text.split(',').reverse().join(',');
}
},
computed: {
reversedText:function(){
return this.text.split(',').reverse().join(',');
}
}
});
</script>
methods里的方法与计算属性起到同样的作用,但是计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时,它才会重新取值。methods则不同,只要重新渲染,它就会被调用,因此函数也会被执行。
使用计算属性还是methods取决于你是否需要缓存,当遍历大数组和做大量计算时,应当使用计算属性,除非你不希望得到缓存
参考:Vue.js实战
以上是关于计算属性的主要内容,如果未能解决你的问题,请参考以下文章