Vue 组件通过 props 传值不会更新

问题描述：

在父组件中修改通过 props 传递到子组件的值后，通过 this.$refs 调用子组件的方法，发现子组件中取到的还是原先的值。

解决方案：

1. 在子组件中使用 watch 监听属性的变化，执行对应操作。
2. 将 this.$refs 调用方法的语句放到 this.$nextTick() 中执行。

原理分析：

1. 子组件接受到的来自父组件的值会自动改变，但是仅限自身，与其有关的其他值不会关联变化，故可以通过 watch 监听变化实现其他内容的变化。
2. $refs 是非响应式的，ref 本身是作为渲染结果被创建的。故在父组件中使用 $refs 调用子组件方法取到的是过去的值（DOM当前值）。 使用 $nextTick 有效的原因见原理3。
3. Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，缓冲在同一事件循环"tick"中发生的所有数据变更（会去重）。然后，在下一个的事件循环"tick"中，Vue 刷新队列内容将新内容更新到 DOM 上。