vue 子组件中的 watch

记录一下：

今天（20170702）想记录的不是常说的基本类型、对象、数据等类型的监听，也不是记录关于对象深度监听方面的，这些都很直白，也因为很常见一般不会被忽略和出错。

今天想记录一下，在一个子组件中 watch 父组件传递过来的数据的问题。主要的表现就是：有时 watch 的回调没有执行，如果这逻辑跟页面渲染有关，那么页面就会有时没有数据显示，有时又正常显示。

下面分别记录子组件 watch 父组件传递过来的数据的几种情况：

第一种，子组件无 v-if 指令控制：

父组件：

<div>

    <son  :son-data="sonData"></son>

</div>

<script>

    created() {

        this.doGetData()

    }

    async doGetData(params) {

      const { success, error } = await getData(params)

      if (success) {

        this.sonData= success.data

      }

    },

</script>

子组件：

<div>

       {{msg}}

</div>

<script>

     props：['sonData']

      watch: {

            sonData(newVal, oldVal) {

              this.msg = sonData.msg

            }

      },

</script>

这种是比较简单的使用情况，也不会存在什么大的疑惑之处。watch，第一次就可以监听到。因为父组件是在 created 的钩子中去请求数据，这时候父子组件的生命周期

第二中，子组件有 v-if 指令控制：

这种情况watch在监听之前，数据可能已经传入，导致第一次watch没有监听到。如果弹窗打开几秒之后，数据再传入，第一次也会监听到。

简单记录，也可能原因搞错了，需要用生命周期去验证。