你试过这个吗?

watch: {
  myProp: {
    // the callback will be called immediately after the start of the observation
    immediate: true, 
    handler (val, oldVal) {
      // do your stuff
    }
  }
}

https://v2.vuejs.org/v2/api/#watch

你需要理解，你拥有的组件层次结构和你如何传递道具，你的情况肯定是特殊的，通常不会被开发人员遇到。

父组件- myprop ->子组件- myprop ->孙子 组件

如果myProp在父组件中被更改，它也会反映在子组件中。

如果myProp在子组件中被改变，它也会反映在孙子组件中。

因此，如果myProp在父组件中被更改，那么它将反映在孙辈组件中。(到目前为止还不错)。

因此，在层次结构中，你不需要做任何事情，道具将具有固有的反应性。

现在说到等级的上升

如果myProp在孙子组件中被更改，它将不会反映在子组件中。你必须在child中使用.sync修饰符，并从grandChild组件中触发事件。

如果myProp在子组件中被更改，它将不会反映在父组件中。你必须在父组件中使用.sync修饰符，并从子组件中触发事件。

如果myProp在grandChild组件中被更改，它将不会反映在父组件中(显然)。你必须使用.sync修饰符子组件并从孙子组件发出事件，然后观察子组件中的道具并在更改时发出事件，该事件由使用.sync修饰符的父组件监听。

让我们看一些代码以避免混淆

Parent.vue

<template>
    <div>
    <child :myProp.sync="myProp"></child>
    <input v-model="myProp"/>
    <p>{{myProp}}</p>
</div>
</template>

<script>

    import child from './Child.vue'

    export default{
        data(){
            return{
                myProp:"hello"
            }
        },
        components:{
            child
        }
    }
</script>

<style scoped>
</style>

Child.vue

<template>
<div>   <grand-child :myProp.sync="myProp"></grand-child>
    <p>{{myProp}}</p>
</div>

</template>

<script>
    import grandChild from './Grandchild.vue'

    export default{
        components:{
            grandChild
        },
        props:['myProp'],
        watch:{
            'myProp'(){
                this.$emit('update:myProp',this.myProp)

            }
        }
    }
</script>

<style>

</style>

Grandchild.vue

<template>
    <div><p>{{myProp}}</p>
    <input v-model="myProp" @input="changed"/>
    </div>
</template>

<script>
    export default{
        props:['myProp'],
        methods:{
            changed(event){
                this.$emit('update:myProp',this.myProp)
            }
        }
    }
</script>

<style>

</style>

但在这之后，你会情不自禁地注意到vue说的尖叫警告

'避免直接改变prop，因为该值将被覆盖 每当父组件重新渲染时。

正如我之前提到的，大多数开发者不会遇到这个问题，因为这是一个反模式。这就是为什么你会得到这个警告。

但是为了解决你的问题(根据你的设计)。我相信你已经做了上面的工作(诚实地说，黑客)。我仍然建议你应该重新考虑你的设计，让它更不容易出现bug。

我希望这能有所帮助。

你可以使用观察模式来检测变化:

在原子级别上做所有事情。首先检查watch方法本身是否被调用通过安慰内部的东西。一旦确定要调用手表，就用您的业务逻辑将其粉碎。

watch: { 
  myProp: function() {
   console.log('Prop changed')
  }
}

如果有人使用Vue 2的合成API，我下面的答案是适用的。 所以设置函数是

setup: (props: any) => {
  watch(() => (props.myProp), (updatedProps: any) => {
    // you will get the latest props into updatedProp
  })
}

但是，您需要从组合API导入手表函数。

不确定你是否已经解决了这个问题(如果我理解正确的话)，但这是我的想法:

如果父节点接收myProp，并且你希望它传递给子节点并在子节点中观看它，那么父节点必须有myProp的副本(不是引用)。

试试这个:

new Vue({
  el: '#app',
  data: {
    text: 'Hello'
  },
  components: {
    'parent': {
      props: ['myProp'],
      computed: {
        myInnerProp() { return myProp.clone(); } //eg. myProp.slice() for array
      }
    },
    'child': {
      props: ['myProp'],
      watch: {
        myProp(val, oldval) { now val will differ from oldval }
      }
    }
  }
}

在html中:

<child :my-prop="myInnerProp"></child>

实际上，在这种情况下处理复杂的集合时，你必须非常小心(传递几次)

如果你添加道具，道具将会改变

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

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