vue笔记（三）

计算属性

在vue中我们可能会有很多的数据需要通过一定的方式进行处理，然后再显示到我们的服务器上，这个时候就可以用到我们的computed来对数据进行操作，从而来达到我们想要的效果。

基本例子：

    <div id="app">
        <div class="box">
            <div>{{toBooks}}</div>
        </div>
    </div>

           new Vue({
            el: '#app',
            data: {
                books: [
                    {
                        name: 'a',
                        age: 23,
                        message: 'aaa'
                    }, {
                        name: 'b',
                        age: 32,
                        message: 'bbb'
                    }
                    , {
                        name: 'c',
                        age: 13,
                        message: 'ccc'
                    }
                ]
            },
           computed: {
                toBooks() {
                    return this.books.reduce((total, b) => {
                        console.log(total)
                        return total + b.name + b.message
                    },'');
                }
            }
          })

计算结果

要使用计算属性（computed）就需要在computed定义一个方法，然后把处理逻辑写清楚，再return把返回结果显示在页面上，在这里要注意div里的括号方法的后面不需要加()，这是跟methods不同的地方，如果是在methods里定义的方法，要把计算结果显示在页面上，方法后面必须加()。

计算属性有两个方法，getter和setter，如果没有定义setter方法，系统默认给我们调用getter。

 new Vue({
            el: '#app',
            data: {
                books: [
                    {
                        name: 'a',
                        age: 23,
                        message: 'aaa'
                    }, {
                        name: 'b',
                        age: 32,
                        message: 'bbb'
                    }
                    , {
                        name: 'c',
                        age: 13,
                        message: 'ccc'
                    }
                ]
            },
           computed: {
                toBooks: {
                set(newValue){
                //监听的数据发生变化要进行什么处理
                },
                get(){
                  return this.books.reduce((total, b) => {
                        console.log(total)
                        return total + b.name + b.message
                    },'');
                }
                  
                }
            }
          })

其实用methods定义的方法也可以得到我们想要的结果，为什么要用computed呢？

如果用methods定义的方法来计算数据的话，对性能会有很大的影响，因为在每次调用methods定义的方法时，都会页面渲染都会被重新执行一次。

而计算属性，会对监听的值进行缓存，只会在监听的值发生改变时，才会再执行函数，否则会直接返回之前的计算结果。

methods定义的方法不会对它所依赖的值进行缓存，所以性能上computed比methods定义的方法要好。