vue的watch监听props（Vue-watch 侦听对象属性）

1. Vue watch 概述

Vue 的 watch 侦听器格式有两种：方法格式和对象格式的侦听器    
    
    
。

方法格式的侦听器只能监听简单数据类型    
    
    
，如：Number   
    
    
  、String


     


     


     
、… 无法监听对象属性的变化    


     


     


  ，也不能在进入页面时




 




 




 
，自动触发； 对象格式的侦听器可以监听对象属性的变化    


     


     


  。在一定条件下   

   

   

，载入页面时     

     

     

 ，也可监听数据变化；

2. Vue 对象的监听方法

键名分割




  




  




  ，监听对象的某一个属性变化；

属性名通过 . 与对象分割
  


  


  


，并通过引号包裹     
     
     
，可以监听对象的某一个属性 data() { return { obj:{ name:andy, age:18 }}}, watch:{ obj.name(newval.oldval) { // 代码实现 } } computed + watch 




   




   




   ，监听对象的某一个属性变化； computed:{ ageVal() { return this.obj.age; } } watch:{ ageVal(newval,oldval) { // 代码实现 } } deep 深度监听

 



 



 


，监听对象的所有属性变化； deep：true 开启深度监听               ，任意属性的属性值变化  




    




    




   ，都会触发 deep 深度监听； deep 深度监听只能获取到最新值； 不推荐 deep 深度监听















，容易造成页面卡顿               ，因为deep 深度侦听需要遍历被侦听对象中的所有嵌套的属性； obj:{ handler(val) { // 代码实现 val 值是 obj 整个对象 }, deep:true // deep 为 true 时   



     



     



   ，开启深度监听 // immediate:false 当immediate 值为 true 时















，刚载入页面时    
    
    
，也可监听数据的变化 }