vue的计算属性(computed)与监视属性(watch)介绍

 一、计算属性 computed

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

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

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

  (1).初次读取时会执行一次。
  (2).当依赖的数据发生改变时会被再次调用。

完整写法:

computed:{
    fullName:{
       //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
       //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
        get(){
             console.log('get被调用了')
           // console.log(this) //此处的this是vm
             return this.firstName + '-' + this.lastName
         },
          //set什么时候调用? 当fullName被修改时。
             set(value){
                 console.log('set',value)
                const arr = value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
              }
         }
}

简单写法:

computed:{
    fullName(){
    console.log('get被调用了')
    return this.firstName + '-' + this.lastName
    }
}

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

5.注意：

  1.计算属性最终会出现在vm上，直接读取使用即可。
  2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

二、监视属性watch

1.定义:对现有的属性和函数进行监视

  1.当被监视的属性发生变化时，回调函数回自动调用，进行相关操作，
  2.监视的属性必须存在，才能进行监视
  3.监视的两种写法：
        （1）：在new Vue里写watch
         2）：通过实例.$watch()监视

2.深度监视：

(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。

正常写法

watch:{
   abc:{
       immediate:true, //初始化时让handler调用一下
       deep:true,//深度监视
       handler(newValue,oldValue){
                  console.log('abc被修改了',newValue,oldValue)
       }
     }, 

简写

  abc(newValue,oldValue){
         console.log('abc被修改了',newValue,oldValue,this)
     } 
  }

备注：
(1).在实际的数据检测中,Vue自身是可以监测对象内部值的改变(这一点可以在vue的调试工具中可以看到)，但Vue提供的watch默认不可以,只有你开起了deep这个配置项后,才可以进行深层的监视

(2).使用watch时根据数据的具体结构，一般的`简单数据型`可以不用开启,面对`复杂数据型`,例如需要监听对象内部的属性变化时,需要开启深度监听。