vue组件强制刷新的4种方案

this.$router.go(0);
window.location.reload();

<template>
    <comp v-if="refresh"></comp>
    <button @click="refreshComp()">刷新comp组件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {
    name: 'parentComp',
    data() {
        return {
            refresh: true
        }
    },
    methods: {
        refreshComp() {
            // 移除组件
            this.refresh = false
            // 在组件移除后，重新渲染组件
            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
            this.$nextTick(() => {
                this.refresh = true
            })
        }
    }
}
</script>

import Vue from 'vue'
Vue.forceUpdate()

<template>
  <div>
    <button @click="handleUpdateClick()">Refresh当前组件</button>
  </div>
</template>
export default {
  methods: {
    handleUpdateClick() {
      // built-in
      this.$forceUpdate()
    }
  }
}

<template>
  <div>
    <span :key="componentKey"></span>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        componentKey: 0
      }
    },
    methods: {
     forceRerender() {
        this.componentKey += 1 // 或者 this.componentKey = new Date();
      }
    }
  }
</script>

<template>
  <div>
    <input
		placeholder="大家都在搜"
	    type="text"
	    maxlength="500"
	    v-model="inputInfo.msg"
	    @blur="resizeView"
	    v-focus
	 >
  </div>
</template>
<script>
  export default {
    data() {
      return {
        inputInfo: { // 输入框对象
        	num: 0, // 字数
            msg: '' // 内容
        },
      }
    },
    watch: {
        [`options.msg`] () {
            let length = utils.fancyCount2(this.inputInfo.msg);
            this.$set(this.inputInfo, 'num', length);
        }
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function(el) {
                el.focus();
            }
        }
    },
    methods: {
      /**
         * input元素失去焦点时触发
         */
        resizeView () {
        	document.body.scrollIntoView(true);
        },
    }
  }
</script>

<template>
  <div>
    <input
		placeholder="大家都在搜"
	    type="text"
	    maxlength="500"
	    v-model="inputInfo.msg"
	    @blur="resizeView"
	    v-focus
	    :key="inputInfo.focus"
	 >
	 <button @click="handleUpdateClick()">Refresh当前组件</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        inputInfo: { // 输入框对象
        	num: 0, // 字数
            msg: '', // 内容
            focus: '',
        },
      }
    },
    activated () {
        this.inputInfo.focus = new Date().getTime();
    },
    methods: {
    handleUpdateClick() {
      // built-in
      this.inputInfo.focus = new Date().getTime();
    }
  }
</script>