vue强制刷新组件的三种方式：$forceupdate、v-if、key

项目中遇到父组件给封装子组件传值，传的值改变后，页面显示没有进行相对的更改，针对解决这个问题进行三种组件刷新方式的使用记录。

1、$ forceupdate()

说明：$ forceupdate()方法是官方提供的方法，$forceUpdate仅仅触发beforeUpdate以及updated钩子，也就是说，$forceUpdate 只是让vue重新渲染了一遍试图，并不会让组件先注销再重新创建。data、computed 不会被重置，created、mounted等钩子函数也不会被执行。 重新渲染不等于组件重载。

使用场景：当data中的某个内容进行了改变，但是页面没有进行实时的刷新，而通过打印能确定数据确实改变，此时可以使用$ forceupdate()来迫使当前组件刷新，但是仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

注：$ forceupdate()仅针对当前组件以及其插槽相关子组件，且子组件是否被渲染取决于组件标签内是否添加了内容。

2、v-if

v-if通过变量控制的形式是真的销毁 DOM，渲染开销比较大。可以触发被控制的组件 beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed 这6个生命周期，通过 v-if 实现强制刷新的开销要远远大于 $forceUpdate。

3、key属性

使用该属性需要保持key在页面的唯一性，不然会造成渲染错误，此属性是将子组件的 key 修改，这样Vue 就会认为子组件不能再使用了。会把旧 key 对应的子组件注销卸载，创建基于新 key 的子组件。因此，会触发完整的生命周期钩子。基本等同于v-if，实现强制刷新的开销也要远远大于 $forceUpdate，等同于v-if。