vue----- watch监听$attrs 的注意事项

目录

前言

原因分析 

解决方案

总结

---

前言

在 Vue 开发过程中，如遇到祖先组件需要传值到孙子组件时，需要在儿子组件接收 props ，然后再传递给孙子组件，通过使用 v-bind="$attrs" 则会带来极大的便利，但同时也会有一些隐患在其中。

可以看到，当我们在输入框输入值的时候，只有修改到 input 字段，从而更新父组件，而子组件的 props test 则是没有修改的，按照 谁更新，更新谁 的标准来看，子组件是不应该更新触发 updated 方法的， 

原因分析 

首先介绍一个前提，就是 Vue 在更新组件的时候是更新对应的 data 和 props 触发 Watcher 通知来更新渲染的。
每一个组件都有一个唯一对应的 Watcher ，所以在子组件上的 props 没有更新的时候，是不会触发子组件的更新的。当我们去掉子组件上的v-bind="$attrs"时可以发现， updated&nbs