vue强制刷新组件更新数据的方式

问题：弹出框添加内容后隐藏，然后再次点击打开的时候内容还在，此时需要刷新组件来操作。或者有些时候我们需要强制触发组件的刷新，又或者数据明明改变了，但是确没有刷新视图。

一：$forceupdate()  (仅针对当前组件以及其插槽相关子组件)

例如：当data中的某个内容进行了改变，但是页面没有进行实时的刷新，而我又通过打印能确定数据确实改变了，因此可以使用$ forceupdate()来迫使当前组件刷新

// 代码执行完毕数据确实改变了，但是页面没刷新的情况，需要下面的内容
this.$forceupdate();

this.$forceupdate() 迫使vue组件重新渲染，实际上指的是强制重启render函数。即调用该方法后 只会触发beforeUpdate、updated 这两个生命周期，而且只会影响当前组件以及其插槽内容

最常见的问题：就是在v-for循环或者某个操作中对data中的内容进行增加、修改、或者删除操作，data中的数据确实改变了，而且打印的内容也改变了，但是页面却没有刷新达到理想效果，这里则可以使用this.$ forceupdate()。
问题诞生的本质是vue虽然是响应式的.但受到javascript的限制，Vue不能检测到对象属性的添加或删除，因为vue在初始化实列时将属性转为getter/setter，所以属性必须在data对象上才能让vue转换它
调用$ forceupdate()就能够让页面重启render函数，即将数据的改变重新进行渲染，就感觉手动刷新页面一样，但是只会触发两个生命周期beforeUpdate和updated
该问题的另一种解决方式可以使用Vue.$set()

二：

     v-if通过变量控制的形式，可以触发 被控制的组件 beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed 这6个生命周期，但是由于v-if指令的原因，会导致其控制的内容会发生显示与隐藏操作

使用v-if加上变量的形式来控制组件的加载与销毁，好处在于能够直接触发组件的完整生命周期
使用v-if的好处在于可以在父组件中通过某个变量来控制子组件的渲染，打开的时候子组件会触发beforeCreate、created、beforeMount、mounted四个生命周期，关闭的时候子组件会触发beforeDestroy、destroyed两个生命周期，因此在某些操作中如果需要通过某个变量的内容来对子组件进行生命周期的刷新，即可用v-if来进行显隐操作

三：通过key属性来进行刷新操作，在web中的效果是最理想的，因为页面根本感觉不到组件的销毁与创建过程，但是确实满足了组件的刷新功能。
操作方式：在data中定义某个变量，然后将该变量放置在组件的key属性中，要实现该组件刷新时，只需改变变量的值即可

<template>
    <child ref="child1" :key='value'></child>
</template>
<script>
import child from "./child";
export default {
 components: { child },
 data() {
    return {
      value: '0'// 只需要通过操作如改变这个值，child子组件就会刷新，而且视觉上不会有变化,当key值改变的时候，child子组件实际上经历了新的child的创建过程以及旧的child的销毁过程
    };
  },
 }
</script>