使用Vue自定义组件时需要注意在那个生命周期中初始化组件
有这样一个业务需求:
- 页面中包含两个div, 两个div通过选择radio切换显示
- div的显示通过v-if控制
- 每个div中都包含一个自定义select组件
- 两个select组件中的list不一样
页面完成够发现两个div中的select组件都可正常下拉\选择值, 但是当在div a中的select选择了值后, 比如选择value a, 再通过radio切换到div b, 发现div b中的select上显示div a中选择的值value a, 而value a不存在与div b中的select的data list中.
初步估计是select组件中显示的label从上一个vue实例中缓存了下来, 在mounted钩子中没能过滤掉这个这个值.
打印出来看看:
发现在mounted状态中组件中显示的label, 即截图中的selectShow为空, 因此不能被过滤掉. updated状态selectShow的值就出现了, 这时获得了selectShow值的引用我们就可以过滤掉上一个vue实例的selectShow的值了.
但是, updated状态我们的组件已经更新完成, 就是说组件已经完成显示了, 已经显示在我们的屏幕上了, 这时再去过滤值就会引起属性的更新, vue就会再走一遍生命周期的流程, 这是一个死循环, 在更新完成状态updated中开始新更新, 会导致浏览器卡死.
那么, 我们应该在哪里进行数据过滤呢?
除了updated状态外, 还有一个生命周期能获得selectShow的引用, 并且不会导致死循环.
这就是beforeUpdate, 在beforeUpdate中我们可以放心的进行数据过滤, 例如直接将selectShow置空.
出现这种问题的原因编写组件时对vue的生命周期不够了解, 通常只在mounted中进行前置操作, 没有考虑到属性在vue实例的不同生命周期的不同状态.