问题：在vue父子组件传值过程中，使用ref去调用子组件方法，没有在子组件中使用watch监听来调用调用子组件方法(使用watch就不会有这个问题)

// 父组件
<child :keyword='keyword' ref='child'></child>
<button @click='handlerChild'>调用子组件方法</button>
export default {
  data(){
    return(){
        keyword:''
    }
  },
  methods:{
    handlerChild(){
      this.$refs.child.getKeyWord()
    }
  } 
}

// 子组件
export default {
  props:{
    keyword:String
  },
  methods:{
    getKeyWord(){
      console.log(this.keyword)
    }
  } 
}

期望值：当父组件改变，子组件props接受，父组件调用子组件数据打印传递数据
结果：每次子组件打印都是上一次父组件传值过来的值？？？我也一时有点懵，难道props不是实时更新父组件传值过来的值吗？再利用watch监听以下keyword，没问题啊，监听每次都是显示父组件传值过来值，那么问题出在？？？

没错，问题出在了 this.$refs.child.getKeyWord()

vue官网找到：

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用

如此我们只需要在调用子组件的方法时添加this.$nextTick(callback) 解决

// 父组件
<child :keyword='keyword' ref='child'></child>
<button @click='handlerChild'>调用子组件方法</button>
export default {
  data(){
    return(){
        keyword:''
    }
  },
  methods:{
    handlerChild(){
      this.$nextTick(() => {
          this.$refs.child.getKeyWord()
      })
    }
  } 
}