Vue计算属性与监视属性

1.1 什么是计算属性？

计算属性是Vue中一个非常实用的特性，它允许我们基于已有的数据属性计算出新的属性值。简单来说，计算属性就是通过data中已定义的属性计算得来的属性。

原理：Vue底层使用defineProperty方法提供的getter和setter来实现计算属性。

1.2 计算属性的特点

1. 缓存机制：计算属性会缓存计算结果，只有依赖的属性发生变化时才会重新计算

2. 响应式：当依赖的数据变化时，计算属性会自动更新

3. 可读写：默认提供getter，也可以设置setter

1.3 基本用法示例

  
原始价格: {
  { price }}元
  
折扣后价格: {
  { discountedPrice }}元

在这个例子中，discountedPrice是一个计算属性，它依赖于price和discount两个数据属性。当其中任何一个变化时，discountedPrice都会自动重新计算。

1.4 getter和setter

计算属性默认只有getter，但也可以提供setter：

computed: {
  fullName: {
    // getter
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },
    // setter
    set: