最近开发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>
vue 未定义属性解决数据不响应问题