不管是通过父组件props接收的数据还是组件本身data里的数据，只要在页面中使用这些数据，这些数据变化，都会触发组件的updated生命周期；如果数据不在页面中使用，那么不会触发组件的updated生命周期。
父组件： <template> <div class='father-view'> <h3>父组件</h3> <div class='flex-view'> <span>name：</span> <el-input v-model="nameInput" class='name-input' /> </div> <div class='flex-view'> <span>age：</span> <el-input v-model="ageInput" /> </div> <Child :name="nameInput" :age="ageInput" /> </div></template><script>import Child from './components/Child.vue'export default { components: { Child }, data() { return { nameInput: '', ageInput: '' } }}</script><style lang="stylus">.father-view { border: 1px solid green padding: 20px .flex-view { display: flex justify-content: flex-start span { width: 100px } } .name-input { margin-bottom: 20px }}</style> 子组件： <template> <div class="child-view"> <h3>子组件</h3> <p>父组件传递给子组件的参数： {{ name }}</p> <el-input type="text" v-model="myName" /> </div></template><script>export default { props: { name: { type: String, default: '' }, age: { type: String, default: '' } }, data() { return { myName: '', myAge: '', searchValue: '' } }, watch: { name: { handler(n) { console.log('子组件watch监听props数据name的变化') this.searchValue = n } }, age(n) { this.myAge = n; console.log('子组件watch监听props数据age的变化') } }, updated() { console.log('子组件updated生命周期数据变化') }}</script><style lang="stylus">.child-view { margin-top: 150px padding: 20px border: 1px solid red}</style>从上例子中能看出，父组件通过prop传给子组件的name在页面中使用，name改变，那么触发子组件的updated生命周期；父组件通过prop传给子组件的age没有在页面中使用，age改变，那么没有触发子组件的updated生命周期。子组件的data数据myName改变，在页面中使用，触发updated生命周期；子组件的data数据myAge改变，没有在页面中使用，没有触发updated生命周期。