关于vue的计算属性

关于vue的计算属性vue的计算属性定义方法类似于方法的定义在computed内写入一个属性方法，在使用的时候可以看作是当作属性使用的计算属性的基本操作可以简单的定义一个属性来进行两个内容的合并computed:{
fullName(){
return this.firstName+’ '+this.lastName
}
​
}在使用属性时，是采用{{fullName}}方法，将其当作属性来对待，不需要加入（）在计算属性定义时候尽可能将其当作属性来对待，命名时不用添加入动词计算属性的复杂操作获取列表中需要的属性之和列表部分：books:[
{id:110,name:‘vue的使用’,price:119},
{id:110,name:‘代码大全’,price:112},
{id:110,name:‘深入理解计算机原理’,price:99},
{id:110,name:‘现代操作系统’,price:89},
]属性部分：computed:{
totalPrice(){
let result=0
for (let i=0;i<this.books.length;i++) {
result+=this.books[i].price

                    //ES6语法：
                    //for(let i in this.books){
                        //result+=this.books[i].price   
                    }
                    return result
                }for循环遍历列表内容，并且将每次遍历得到的price值相加赋值于result，结束之后返回result，并在div使用{{totalPrice}}内显示计算属性使用时候为什么不使用（）setter和getter在计算属性中编写的代码实际上是一个简写形式，在简写模式中省略了set方法和get方法computed:{
                fullName(){
                    return this.firstName+' '+this.lastName
                }

​
} 完整的计算属性编写代码应该是具有get方法和set方法computed:{
fullName:{
//计算属性没有setet方法，即是一个只读属性
set:function(newvalue){
const names=newvalue.split(’ ‘);
this.firstName=names[0];
this.lastName=names[1];
},
get:function(){
return this.firstName+’ '+this.lastName
}
}其实正常情况下计算属性中的set方法并不编写，计算属性会获取get方法值，所以简写中会省略get方法和set方法，而在完整写法中fullName后本身就不具有（），所以在使用计算属性时候后面也不需要加上（），可以看作上定义一个属性调用get方法在计算属性中，set方法使用时可以传入一个参数，split（）方法是将传入的参数以何种方式分割，在此次实验中是以‘ ’ 空格分隔，会将传入的参数以空分隔，最后将分隔后的前后分别赋值给变量，就可以在控制台通过编写来进行响应式改变，注意，因为传入的参数是以空格进行分隔，所以传入的参数也应该具有空格计算属性和方法的区别计算属性和方法的定义虽然有些相似，但是在使用起来有一些区别，首先调用时候计算属性不用带有（），最重要的是在多次打印同一操作时，方法会被重复调用，而计算属性只会调用一次