表格表单 - 数据更新了页面却没有重新渲染且子组件中的数据更新失败

在父组件中使用$set方法导致子组件中的数据更新失败

问题一：在父组件中使用$set方法导致子组件中的数据更新失败

出现问题的原因：

因为我在方法中调用的$set方法，该方法会触发页面全部重新渲染。不懂的该方法可以去官网中查看解释。vue文档列表渲染中有条注意事项

然后我给子组件传入了该dataList对象数组中的某个对象的monitorMasters数据

然后我只在子组件的的mounted()方法中调用了this.flexBackendMappings()方法，该方法只会在组件渲染时调用。

解决方法：

所以在我使用$set方法时，只有父组件会重新渲染，而子组件好像不会重新渲染，这样就会造成子组件数据的丢失。
所以我在子组件的watch()方法中加了监听items的方法，只要items数据重新发生变化，就会触发this.flexBackendMappings()方法，更新页面数据。

问题二：数据更新了页面却没有重新渲染

出现问题的原因：

虽然我更新了页面数据，当时我的dataList是一个对象数组，所以该数组每循环一次，就会刷新一次组件，同时，子组件中的数据也会被重新刷新，这时就会出现一些奇妙的问题：

我在子组件中通过 $el.offsetWidth 获取子组件的长度，但是父组件每次 $set 刷新时，该 $el.offsetWidth 获取到的长度都不一样，所以会出现获取到的长度有错误的问题。

解决方法：

给子组件加上 :key 唯一标识，让子组件重新渲染

当子组件的 :key 值发生变化时，会让子组件重新渲染，这样子组件每次重新渲染获取到的 $el.offsetWidth 长度都是一致的。就不会发生长度有错误的问题。
如果不使用 :key ，Vue会使用一种最大限度减少动态元素并且尽可能的再利用相同类型的元素的算法，就不会重新渲染子组件，也就不会走 create() 和 mounted() 方法。

vuejs 解决数组子组件，在子组件相同情况下，splice更换或删除数组数据，组件不刷新，组件外能刷新的问题