VUE computed计算属性

1. 为什么叫计算属性？

  因为计算属性是对 data 中的属性 进行计算的出来的 属性

2. 计算属性的 get() 和 set() 方法，底部是用 Object.defineProperty 实现的，当有人读取 计算属性 时，get 就会被调用，并且返回值就作为 该计算属性的值

3. vm._data 可以读取到 data 里面的值，但是不会读取 computed 里面的值

4. 计算属性 和 data 属性一样，都挂载在 vm 实例身上，vm._data 中的属性 计算完之后，直接挂载在 vm 身上

5. 在computed 中的 get() 方法中，vue 把 this 指向了 vm ，因此可以直接调用 this.xxx 读取到需要进行计算的属性

6. get() 什么时候调用？ 1. 在初次获取时，会调用  2. 当所依赖的数据发生改变时，会调用

7. computed() 相比于 methods 有什么优势？

    它有缓存，当同一个计算属性被调用多次又没有发生变化时，get() 只会调用一次，后面几次调用直接从缓存里面读取，而 methods 不会缓存，每次都调用

8. 计算属性 不要用 xxx.get() 去调用，vue 会自动调用计算属性的get()方法，并且将 return 的值 作为计算属性的值，放在 vm 身上。

9. 计算属性没有真正的值，要想改变它的值，只有改变它依赖的数据，就会自动调用 set() 方法。

 

 

总结：

　　计算属性：

　　　　1. 定义： 要用的属性不存在，要通过已有属性计算得来。

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

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

　　　　　　（1）初次读取时会执行一次。

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

　　　　4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

　　　　5. 备注：

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

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

　　　　6. 简写：

　　　　　　当计算属性确定只有 get 没有 set 时，可以简写成：

　　　　　　computed: {

　　　　　　　　fullName() {

　　　　　　　　　　return this.firstName + this.lastName;

　　　　　　　　}

　　　　　　}

　　　　　　表面上是一个函数，实际上是执行了这个函数，并且把 return 的值 作为 vm.fullName 的值。