Vue知识点:计算属性

1. 定义:计算属性不存在,要通过已有属性计算得出。

2. 原理:底层借助了Object.defineproperty方法提供的getter和setter。

3. get函数什么时候执行?

          (1)初次读取时会执行一次。

          (2)当依赖的数据发生改变时会被再次调用。

4. 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。

5. 备注:

          (1)计算属性最终会出现在vm上,直接读取使用即可。

                    注:可以直接使用插值方法调用计算属性。比如: {{fullname}}

          (2)如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发            生改变。

```javascript

<div id="root">

姓:<input type="text" v-model="firstName"/> <br>

名:<input type="text" v-model="lastName"/> <br>

全名:<span>{{fullName}}</span>

</div>

const vm = new Vue({

    el:"#root",

    data:{

      firstName:'张',

      lastName:'三'

    },

    computed:{

      //完整写法 计算属性是一个对象

      fullName:{

      get(){

        console.log('get被调用了')

        return this.firstName + '-' + this.lastName

      },

      set(value){

        console.log('set',value)

        const arr = value.split('-')

        this.firstName = arr[0]

        this.lastName = arr[1]

      }

      }

    },

    //简写 fullName 只考虑读取,不需要修改的时候简写

    fullName(){

        console.log('get被调用了')

        return this.firstName + '-' + this.lastName

      },

      }

    },

})

```

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容