文章目录
1.computed学习
- computed的操作1
字符串的拼接
{{nameComput}}
<script>
const app = new Vue({
el:"#app",
data:{
frlatName:"James",
lastName:"Tony"
},
computed:{
nameComput(){
return this.frlatName+" "+this.lastName;
}
},
methods:{
getNameComput(){
return this.frlatName+" "+this.lastName;
}
}
})
</script>
- computed操作2
对列表的JSON价格进行计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>总价格为:{{totalPrice}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
books:[
{id:101,name:"大话数据结构",price:520},
{id:102,name:"springMvc",price:322},
{id:103,name:"编程之道",price:41},
{id:104,name:"解决bug的心态",price:45}
]
},
computed:{
totalPrice:function(){
let sum=0;
//ES5语法
for(let i=0;i<this.books.length;i++){
sum += this.books[i].price;
}
// for(let book in this.books){
// sum += this.book;
// }
//ES6语法
// for(let book of this.books){
// sum+=book.price;
// }
return sum;
}
},
methods:{
}
})
</script>
</body>
</html>
为什么使用computed:因为computed的性能要比methods的要高，调用时它只执行一次，缓存的效果
- computed的操作3
computed的原生是具有get/set方法，但是默认为get方式
书写方式:
computed:{
/*
computer的get/set属性
set可以将新的参数从新设置到其中，改变原先参数
get只有可读属性，默认只有可读属性
split操作字符串方法 分割字符串
*/
fullName:{
set:function(newValue){
const names = newValue.split(" ");
this.fristName=names[0];
this.lastName=names[1];
console.log("计算属性computed执行。。。。");
},
get:function(){
return this.fristName+" "+this.lastName;
}
}
- computed和methods比较
一般情况使用computed优先，因为computed有缓存，而方法中的函数每次调用一次都会执行大大的对内存资源消耗
<script>
const app = new Vue({
el:"#app",
data:{
fristName:"hello",
lastName:"Kity"
},
computed:{
fullName:function(){
console.log("fullName 执行了。。。。");
return this.fristName+" "+this.lastName;
}
},
methods:{
getFullName:function(){
console.log("getFullName");
return this.fristName+" "+this.lastName;
}
}
});
</script>
区别：methods的方式在每次调用都会执行，消耗内存资源，computed如果有修改，但是始终都执行一次，对资源消耗比较少，所以优先考虑computed
