您现在的位置是：首页 >技术杂谈 >Vue计算属性网站首页技术杂谈

1，为什么Vue会设计计算属性(computed property)？

答：一定程度上，Vue的作用就是管理呈现到HTML页面上的所有数据data的，每当一个data发生变化，Vue实例就会自动的去更新模板里面使用到data的地方，而这个data很有可能需要计算得到，这种不断地去计算得到消耗资源，只计算一次最好(Vue计算属性的缓存)。而且这些计算得到的属性不能被Vue实例对象直接进行管理(重点)，所以计算属性的最终目的就是让计算得到的属性挂在Vue实例对象vm上面，vm.property使用最方便。

2，什么是Vue里面的属性？

答： 实例化Vue对象时传入的data配置项对象里面的属性。可以这么说：被Vue管理的数据都是Vue的属性，只是这些数据的管理方式各异，存放在内存的不同地方，或者需要从服务器获取。

3，计算属性的定义？

答：对Vue管理的数据 进行一系列操作得到的新属性。

4，添加computed配置项对象并新增计算属性

vm = new Vue({
    el:'nodeobj',
    data:{
        firstname:'xx',
        lastname:'cc'
        },
    computed:{
        fullname:{
            //当HTML页面使用到了fullname属性，则会自动调用get方法，将其返回值作为属性值
            get(){return this.firstname+this.lastname}
                 }
             }
            })

        其中，get中的隐藏this参数默认指向vm对象。按道理来说，this由浏览器指定，但是Vue实例自动将this指针改成了自己的地址，这样才能让计算属性挂在自己身上。

5，如何使用计算属性？

答：计算属性被Vue实例对象进行了数据代理，可以通过Vue实例去获取，即vm.computed_property。 

 6，计算属性的get方法什么时候执行？

答：第一次更新模板时(强制的)。计算属性依赖的属性发生变化时。

7，计算属性的set方法？

答：当计算属性(很不幸被Vue强制收编了)需要修改时，由于数据代理，必须通过set方法进行修改(因为只有vm.property才能找到它，没有其他途径找得到了，茫茫16g内存，你到底在哪儿？) ，所以set方法有一个形式参数value指向被修改的值，只有当计算属性被修改时，才会调用set方法。

vm = new Vue({
    el:'nodeobj',
    data:{
        firstname:'xx',
        lastname:'cc'
        },
    computed:{
        fullname:{
            //当HTML页面使用到了fullname属性，则会自动调用get方法，将其返回值作为属性值
            get(){return this.firstname+this.lastname},
            set(value){log(value)},
                 }
             }
            })

8，尽量使用Vue的属性用于属性计算？

答：尽量实现被Vue实例管理的数据用于属性计算。不要随便使用变量进行计算(即使可行。) 

9，Vue计算属性的细节

10， 计算属性的简写形式？

答：只有当计算属性不会被修改时(不涉及set方法)时可以进行简写。

vm = new Vue({
    el:'nodeobj',
    data:{
        firstname:'xx',
        lastname:'cc'
        },
    //fullname()等价于get()
    computed:{
        fullname(){
                return this.firstname+this.lastname}
            })