Vue计算属性

Vue的计算属性用于管理需要计算得来的数据,提供缓存机制以提高性能。它们是Vue实例的属性,由data中的数据计算得出,通过get和set方法处理读写操作。计算属性在依赖数据变化时自动更新,并且在不需要修改时可以采用简写形式。Vue推荐使用计算属性进行属性计算,以保持数据管理的规范性。
摘要由CSDN通过智能技术生成

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}
            })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值