vue相同组件不刷新使用watch监听数据变化来修改

最近开发Vue的工作中遇到一个问题，在项目中查看数据调用相同子组件时，获取的数据在子组件中不刷新。目前的代码是在子组件中用props来接收传值，在 created里把接收的值放到相关的控件里。经过一步一步的调试后发现，第一次获取文章信息调用子组件有运行 created 这一步，但是第二次获取不同的文章调用相同的子组件时，却没有运行到 created 这一步，结果就导致了子组件里面的显示没有更新了。

原因：vue会复用相同的组件，将不再执行created,mounted之类的钩子，所以项目放在created上面也就不更新数据了。

解决：有网友说通过设置路由钩子beforeRouteUpdate或者监听$route的变化来执行相关方法更新数据。也可以通过给子组件添加 :key 值来处理，或者使用 this.$forceUpdate() 来强制更新。下面我们来使用 watch 监听路由变化来手动更新数据。

<template>
  <div>
	<el-input v-model="boolFormData.bool1" placeholder="如:开">
		<template slot="prepend">开</template>
	</el-input>
	<el-input v-model="boolFormData.bool0" placeholder="如:关">
		<template slot="prepend">关</template>
	</el-input>
  </div>
</template>
<script>
export default {
  name: 'BoolTree',
  props: {
    formData: Object
  },
  watch: {
    formData: {
      handler(val, oldVal){
        this.boolFormData.bool1 = val.bool1
        this.boolFormData.bool0 = val.bool0
      },
      deep:true //true 深度监听
    }
  },
  data() {
    return {
      boolFormData: {
        bool1: '',
        bool0: ''
      }
    }
  },
  created() {
    this.boolFormData.bool1 = this.formData.bool1
    this.boolFormData.bool0 = this.formData.bool0
  }
</script>