VueJS 2.0 - 无法在道具更新上挂钩组件答案

【问题标题】：VueJS 2.0 - Can't hook a component on props updateVueJS 2.0 - 无法在道具更新上挂钩组件
【发布时间】：2017-11-18 22:13:26
【问题描述】：

我需要在更新时强制重新渲染组件才能调用FB.XFBML.parse()。但是，无论我做什么，我都无法在属性更新时调用任何生命周期钩子beforeUpdate/updated。（根据docs，它只侦听data 的更新，而props 显然不是）。

<template>
  <div>
    {{myProp}}
  </div>
</template>

<script>
  export default {
    props: ['myProp'],

    watch: {
       myprop: function(newVal, oldVal) { // watch it
            console.log('Prop changed: ', newVal, ' | was: ', oldVal)
       }           
    },

    updated(){ // never invoked},

    beforeUpdate(){ // never invoked }

  }
</script>

我可以看到属性channel 在从父组件发送不同的值时发生了变化。

有没有监听props变化的钩子？

更新

正如@chris 建议的那样，我尝试watch 我的财产，但没有任何改变。然后我意识到我遇到了一个特殊情况：

<template>
    <child :my-prop="myProp"></child>
</template>

<script>
   export default {
      props: ['myProp']
   }
</script>

我将父组件接收到的myProp 传递给child 组件。然后watch: {myProp: ...} 不起作用。

【问题讨论】：

我相信组件级别的道具突变不是理想的行为。道具旨在以一种方式流动 - 父母对孩子。另一种方法可能是基于道具创建一个计算属性并观察那个？ vuejs.org/v2/guide/components.html#One-Way-Data-Flow
@dispake，我不需要改变 myProp。我只需要知道它什么时候改变。当它从“更高”（不仅是父）组件发送新的myProp 时。
我希望道具全部流向孩子并触发孩子的手表。你能设置一个 jsfiddle 来展示你的用例吗？
是的，这就是我所期望的 :) 当这样的事情不起作用时，它通常是你的代码库中的东西。你在 Chrome 中使用 vue 开发工具吗？如果没有，一定要使用它们！尝试浏览你的组件树，看看你是否可以先检测到父组件中的 prop 更改，然后从那里往下走。
您的prop 是myProp，但您正在观看myprop（小写）。

标签： vue.js vuejs2

【解决方案1】：

你要找的是watch:

<script>
  export default {
    props: ['channel'],

    watch: {
      channel(newValue) {
        console.log(newValue)
      }
    }
  }
</script>

【讨论】：

克里斯，谢谢你的建议。我已经相应地更新了我的问题。