Day03-Vue的计算属性

Vue的计算属性

什么是计算属性

我们知道，在模板（dom）中可以直接通过一些插值语法来显示一些data数据，但是有些情况，我们需要对多个数据进行处理之后再进行展示

• 比如，需要显示firstname和lastname:
  
  

computed:计算属性（其中也存放的function）

  <h2>{{Fullname}}</h2>
  <!--    computed计算属性 dom中用的时候不用加小括号-->


computed:{
          Fullname:function () {
                return this.firstname+' '+this.lastname
          }
        },

computed中不要起动词的名字，最好起属性的名字

computed的复杂操作

需求：在data中放一个数组books，里面有五本书，里面分别有书的各种属性，其中有一个属性为书的价格，要求在DOM中显示五本书的总价格

<div id="app">
    <h2>总价格：{{allPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            books:[
                {id:1,name:'课本一',price:10},
                {id:2,name:'课本二',price:10},
                {id:3,name:'课本三',price:10},
                {id:4,name:'课本四',price:10},
                {id:5,name:'课本五',price:10},
            ]
        },
        computed:{
            allPrice:function () {
                let result = 0;
                for(let i=0;i <this.books.length;i++){
                    result += this.books[i].price;
                }
                return result
            }
        }

    })
</script>

注意代码中的for循环

computed的完整写法

//完整的computed写法
       computed:{
            fullName:{
                set:function () {
                },
                get:function () {
                    return this.firstname+' '+this.lastname
                }
            }
        }
 //简写
  computed:{
            fullName:function () {
                return this.firstname+ ' '+this.lastname
            }
        }

computed（计算属性）和methods（方法）

computed有缓存，只要值不变换，就不会重复的用其中的方法，而methods每调用一次都会运行一次方法

<div id="app">
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>

    <h2>{{getFullname()}}</h2>
    <h2>{{getFullname()}}</h2>
    <h2>{{getFullname()}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            firstname:'ya',
            lastname:'nan'
        },
        computed: {
            fullName: function () {
                console.log('computed');
                return this.firstname +' '+this.lastname
            }
        },
        methods: {
            getFullname:function () {
                console.log('methods');
                return this.firstname+' '+this.lastname
            }
        }
    })
</script>

所以，computed的性能更高，不会浪费系统资源。