【vue2.x 】2、-- computed和watch

先声明： 笔记是摘取至网上某个大佬的课件或者笔记（具体哪位我也记不清楚了），结合了本人学习的经验。主要是给自己学习用的。仅此声明！

1、computed - 计算属性

• 定义： 通过已有的属性计算出新的属性
• 原理： 借助了Object.defineproperty方法，建立响应系统，调用initComputed函数
• 优势： 与methods实现相比，内部有缓存机制（复用），效率更高，调式方便
• 计算属性最终会出现在vm对象上，可直接调取使用
• 如果计算属性要修改，需要写set函数去响应修改，且set中要引起计算时以来的数据发生改变
  compented和methods的对比：
• compented对相同的数据值渲染一次，methods会渲染多次
• compented对数据有缓存机制，计算属性会观察数据是否发生变化，没有变化就返回原来的值，不会重新计算。而methods会重新计算

2、watch - 监听属性

• 定义：观察和响应 Vue 实例上的数据变动，当被监视的属性发生变化时，回调函数自动调用，进行相关操作。
• vue中watch默认监测对象外部一层
• 配置deep：true可以对对象内部值进行监测
  • 如果不配置deep:true，遇到对象时，虽然内部值变化了，但是外部对象的地址并没有发生变化，所以不会触发handler
• Vue自身可以监测对象内部值的改变，但Vue提供的watch不可以

data: {            
    numbers:{                
        a:1,                
        b:1            
    }        
},        
watch: {            //监视多级结构中某个属性的变化     
    'numbers.a':{               
        handler(){                    
            console.log('a改变了')                
        }            
    },            //监视多级结构中所有属性的变化            
    numbers:{                
        deep:true,                
        immediate:true, //立即执行 
        handler(newValue,oldValue){           
            console.log("new:"+newValue+'----'+"old:"+oldValue)}            
    }        
},  

immediate:true, //立即执行 :当刷新页面时会立即执行一次handler函数
使用场景:
不加immediate:true 在tab切换时,你已经选中了2-1,当你刷新页面时,选项会回到默认位置1-1
加immediate:true 在tab切换时,你已经选中了2-1,当你刷新页面时,选项仍在在2-1位置

3. computed和watch对比

区别：

• 计算属性能完成的，监听属性都能完成
• watch可以开启异步任务： 使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
• computed是计算值，只有值发生变化才会执行方法，，watch是监听观察动作，有改变就执行。
• computed具有缓存性，数据变化时先读取缓存，如果值没变化则不做操作，而watch没有缓存，直接执行。