十一.vue计算属性-处理data

computed ： Vue提供的一个配置项

注意: 当data中的数据发生变化,页面中的指令和表达式会重新计算, 有时候不相关数据变化会导致一直重新计算,所以这里引出了计算属性

1. 如何使用？

   computed 和 data同级，计算属性写在computed中；

   写起来像方法；

   用起来像属性。

2. 特点（注意点）：

   1）一定要有返回值。

   2）可以使用data中的已知值。

   3）只要跟计算属性相关的数据发生了变化，计算属性就会重新计算，不相关的属性无论如何变化，都不会导致计算属性变化。

   4）计算属性名不能和data中的数据重名（因为要使用data中的数据）

3. 什么时候使用？

   想要根据data中的已知值，得到一个新值，并且这个新值会随着相关数据的变化而变化

const vm = new Vue({
      el: "#app",
      data:{
        msg: 'hello vue'
      },
      computed:{
        reverseMsg(){
        /* 
        新增computed属性，在这个属性中
        新增一个方法，在方法中 return 值
        计算属性写法是函数，但是 编译到实例上是一个属性
        */
          return this.msg.split('').reverse().join("")
        }
      }
    })
  /*
  计算属性优势：
    1，计算属性在 首次计算后，会基于依赖（可以依赖多个值）进行缓存，首次计算后的值
    在多次使用这个计算属性时，如果依赖的值没有变化，不会重新调用，而会使用缓存的值
  */ 
 /* 
 注意：
  1，新增一个计算属性时，不要和 data中已经存在的 或者 实例上已经存在的其他属性重名
  2，默认 计算属性 是 不能被修改的 会破坏，和 依赖之间的关系
    如果要修改，应该去修改依赖

    如果修改计算属性 计算属性要写 完整写法 必须要加上setter 在setter中 去修改
 */
const vm = new Vue({
      el: "#app",
      data:{
        num: 20
      },
      methods:{
        changeNum2(){
          // 直接修改计算属性
          this.num2 = 100
        }
      },
      computed:{
        num2:{
          get(){
            console.log("获取了")
            return this.num*2
          },
          set(val){
            console.log('设置值了'+val)
            this.num = val/2
          }
        } 
      }
    })