最近因为公司的IOT项目，前端产品编辑属性的时候遇到的一些坑。记下来方便日后解决问题。

一、业务需求

在产品属性页面，点击“修改”，能根据定义的“数据数据”来设定相关的格式，有text,enum,int等等。能做到不相互影响并且正常修改。

二、组件调用方式

产品属性列表页A.vue，调用子组件数据类型页B.vue, 数据类型页B.vue里面再调用子组件数据类型属性页C.vue，从A到B到C是用 props 来接收数据。

三、遇到的问题

1、打开相同组件页数据不更新。如产品属性有两个相同的text类型，两个属性名称和值都是不相同的，点击修改一个显示数据后不操作后关闭，再点击修改另一个属性则显示的数据为之前的，经过查询后发现原因是：vue会复用相同的组件，将不再执行created,mounted之类的钩子。相关链接：vue相同组件不刷新

2、部分值没有更新到视图。因为后台需要枚举类型，所以前端提交的是{"key": "value"}这种格式的，因为是用的相同组件，所以在 data()里面无法写自定义的参数，结果使用 this.$set 解决问题。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

3、修改产品属性后重新打开没显示修改后的值。因枚举类型前端处理的数据跟后台返回的数据格式不同，前端 props 接收数据 在 data() 里有做处理，又回到了第1点发现的问题。当时头都大了，之前用了 watch 来监听数据更种处理（vue watch普通和深度监听），顾得了这头顾不了那头。后来想到最根本的问题是相同组件。于是在A.vue引用组件B.vue那里添加一个 :key="随机值" 啊，整个世界都清净了。不用去考虑监听等其它处理了。

<byte-retrieve-tree ref="retrieveTree" :show="true" :form-data="propEditForm" :key="keyEditForm" />