Vue.js如何监听props改变

一些新手朋友，可能对子组件中如何监听props改变比较疑惑，其实子组件中也可以使用watch来监听props的改变

实例代码

new Vue({
  el: '#app',
  data: {
    text: 'Hello'
  },
  components: {
    'child' : {
      template: `<p>{{ myprop }}</p>`,
      props: ['myprop'],
      watch: { 
      	myprop: function(newVal, oldVal) { // watch it
          console.log('Prop changed: ', newVal, ' | was: ', oldVal)
        }
      }
    }
  }
});

上述代码，我们在子组件中监听了myprop属性，在文件中我们可以这样使用：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <child :myprop="text"></child>
  <button @click="text = 'Another text'">Change text</button>
</div>

我们使用watch侦听器来达到了类似hook效果，在props改变的时候该函数会调用，以下就是俺的总结过程。