vue中子组件初始化watch监听不到props的数据

正常情况我们使用watch监听（基本用法）

在页面初始化没有触发，打印不到变化

watch: {
    userType(newval){ 
       console.log(newval) 
    } 
},

解决方法

watch监听

1.handler方法和immediate属性

父组件向子组件传值时 这时候值并没有发生改变我们却想在初始的时候就触发watch 就需要这个属性了 immediate 默认为false 为true时只初始化可以被监听

watch: { 
    userType: { 
        handler(newval, old) { 
          console.log(newval, old); 
        }, 
        immediate: true 
    } 
},

2.deep属性

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听，主要用来监听用来监听obj

watch: {
    testObj: {
      handler(newval, old) {
        console.log(newval, old);
      },
      immediate: true,
      deep: true
    }
  }
  deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，
  但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。




watch: {
    'obj.a': {
      handler(newval, old) {
        console.log(newval, old);
      },
      immediate: true,
      // deep: true
    }
  }
  
如果监听obj中的属性 例如obj.a 就可以优化,使用字符串形式监听，这样 vue会一层一层解析，
直到遇见a属性，然后给它设置监听函数

3.监听路由

   watch: {
      '$route'(to,from){
        console.log(to);   //to表示去往的界面
        console.log(from); //from表示来自于哪个界面
        if(to.path=="/路径"){
            console.log('操作')
        }
      }
    }

set方法

set方法调用时，可以触发页面全部重新渲染

created(){ 
  this.$set(this.userType); // 初始化数据 触发监听 userType是props 
},

computed计算属性

    computed:{
      testData:function(){
        return //计算好的值
        //这时候计算好的值 就付给了你的变量 在实例中可以this.使用
      }
    }

初始有值的时候 就已经计算了，并且监听数据改变重新计算

注意: 声明的变量的data中不可以重复声明否则报错