Vue学习计划--Vue2（四）watch、class、style、set

Vue

1. 监听(watch): 监听一个属性的变化

   1. 监事属性watch:

      1. 当监视的属性变化时，回调函数自动调用，进行相关操作
      2. 监视的属性必须存在，才能进入监视
      3. 监视的两种写法：
         1. new Vue 时传入watch配置
         2. 通过 vm.$watch()监视
      4. immediate初始化时让handler调用一下

   2. 深度监视：

      1. Vue中的watch默认不监视对象内部值的变化（只监视一层）
      2. 配置deep:true可以监视对象内部值变化（多层）

      备注：

      1. Vue自身可以监视对象内部值得变化，但Vue提供的watch默认不可以
      2. 使用watch时，根据数据的具体结构，决定是否采用深度监听

   3. 简写：当确定不使用immediate和deep属性时可以简写

   一、监听
       1. 
       const vm = new Vue({
       el: "#app",
       watch:{
           immediate: true, // 初始化时让handler调用一下
           deep: true, // 深度监听
           handler(newValue, oldValue){
               console.log(newValue, oldValue)
           }
       }
       })
       2. 
       vm.$watch('isSHow',{
       immediate: true, // 初始化时让handler调用一下
       deep: true, // 深度监听
       handler(newValue, oldValue){
           console.log(newValue, oldValue)
       }
       })
   二、简写
       1. 
       const vm = new Vue({
       el: "#app",
       watch:{
           isShow(newValue, oldValue){
               console.log(newValue, oldValue)
           }
       }
       })
       2. 
       vm.$watch('isSHow', function(newValue, oldValue){
       console.log(newValue, oldValue)
       })
   

2. 计算属性（computed）、方法methods、监听（watch）的区别?
   computed、watch、methods专人干专事

   1. 计算属性computed:
      1. 目的是得到一个计算结果，必须要有return，一个状态值受多个状态值影响。
      2. 有缓存，当依赖状态值变化是，才会重新计算。
      3. 不能异步
      4. 本身不支持传参，可以使用闭包
   2. 事件methods：
      1. 绑定的事件处理，非必须return
      2. 没有缓存
   3. 监听watch:
      1. 一个状态的改变 影响多条数据，没有return
      2. 没有缓存
      3. 可以异步
      4. 不传参

3. class和style绑定

   1. class样式 写法： :class = “xxx”, xxx可以是字符串、对象、数组
      1. 字符串写法适用于：类名不确定，要动态获取
      2. 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
      3. 数组写法适用于：要绑定多个样式，个数确定，名字也确定
   2. style样式

      :style = "{fontSize: xxx}" 其中xx是动态的
      :style = "[a, b]" 其中a, b是样式对象
      

      示例：

      
      	
      	
      	  
      	  
      	  
      	  
      	  
      	  
      	
      	
      	  
      
      	    
      	    
      	    
      这是一个动态class
      	    点击单次切换class名
      	    
      
      	    
      	    
      	    
      这是一个动态class
      	    点击数组切换class名
      	    
      
      	     
      	     
      这是一个动态class
      	     表达式切换class名
      	    
      
      	    
      	    
      	    
      这是一个对象绑定的class类名
      	    表达式切换class名
      	    
      
      	    
      	    
      	    
      这是一个对象绑定的class类名
      	    表达式切换class名
      	
      	  
      	  
      	
      	
      	
      

4. set方法

   1. Vue会监视data中所有层次的数据。

   2. 如何监视对象的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的内容

      • 对象中后追加的属性，Vue默认不做响应式处理
      • 如需要给后添加的属性做响应式，使用如下API:

      Vue.set(target, propertyName/index, value)
      vm.$set(target, propertyName/index, value)
      

   3. 如何监视数组中的数据？ 通过包裹数组更新元素的方法实现，本质就是做两件事

      1. 调用原生对应的方法对数组进行更新
      2. 重新解析模板，进而更新页面

   4. 在Vue修改数组中的某个元素一定要用如下方案：

      1. 使用这些API：push(), pop(), shift(), unshift(), sort(), reverse(), splice()

   5. Vue.set()或者vm.$set()

      特别注意：Vue.set()和vm.$set()不能给vm或者vm的根数据对象添加属性！！
      示例：

      
      	
      	
      	  
      	  
      	  
      	  
      	  
      	
      	
      	  
      
      	      {{ obj }}
      	      点击改变obj值
      	      
      
      	      {{ arr }}
      	      点击改变arr值
      	      
      
      	      {{ arr2 }}
      	      {{ arr2 }}
      	      点击改变arr顺序sort方法
      	      
      
      	      {{ arr3 }}
      	      点击翻转arr