VUE中父组件传给子组件传值，watch第一次监听不到

今天编程过程中，遇到一个问题就是vue 父组件传给子组件传值，子组件中watch第一次中监听不到，只有第二个数据变化才能检测到变化。经过各种尝试终于解决了这个问题

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站 点击跳转浏览。

问题描述:

父组件中主要代码如下:

 <more  :type="curTab"/>

子组件中关键代码如下:

  props: {
    type: {
      type: String,
      default: ''
    }
  },
 watch中关键代码
 watch: {
    type: {
      handler (val, old) {
        this.settype()
      }
    }
  },

在debugger过程中发现父组件中curTab第一次传值，watch中监听不到。经过一番操作，终于解决这个问题，有两种解决这个问题的方法

方法一：加上参数immediate: true

经过查询官网原因，查到的watch默认最开始的数据不会执行回调，就是说不会进行监听数据的变化。

想要第一就进行回调，就像官网说的那样要加上immediate: true选项即可
具体写法如下:

 watch: {
    nameList : {
      handler (val) {
        let self = this
        self.fileNameList = val
    },
    immediate: true
  }
  },

方法二:延时解决

因为watch检测不到第一次的变化，那么我们可以让代码进行延时在进行赋值

  moreClick () {
      let self = this
      self.curSelectTab = ''
       setTimeout(() => {
         self.curTab = '3'
       }, 50)
    }

是因为最开始old的值就是1
然后由于延时所以把curTab的值设为空字符串 ，然后延时传递过去，相当于有一些默认值 ，然后延时结束再传递过去1或者2 这个值，那么watch就检测到了Tab值的变化。

watch的几种写法

第一种 即时回调的侦听器

 watch: {
    nameList : {
      handler (val) {
        let self = this
        self.fileNameList = val
    },
    immediate: true
  }
  },

第二种 深层侦听器

export default {
  watch: {
    someObject: {
      handler(newValue, oldValue) {
        // 注意：在嵌套的变更中，
        // 只要没有替换对象本身，
        // 那么这里的 `newValue` 和 `oldValue` 相同
      },
      deep: true
    }
  }
}

第三种 一般的写法

 watch: {
    data (val) {
      let self = this
      self.configFile = val
    }
  },