A method of refresh Vue page with provide and inject

Directory Method 1: Call Function Directly Method 2: Comparison of Advantages of Using provide/inject (Static Refresh)

Method 1: Call the function directly

Overload the entire page, either of the following

1.window.location.reload()

2.this.$router.go()

Method 2: provide/inject (static refresh)

Declare an reload refresh function in a higher order function

<template>
  <div id="app" v-if="show"></div>
</template>
<script>
export default {
  //  Control display / Hide ,  Implement refresh 
  data () {
    return {
      show: true
    }
  },
  //  Pass the refresh method to the low-level component 
  provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
    //  High-order component definition refresh method 
    reload () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  }
}
</script>

Using refresh functions in low-order components

<template>
  <div></div>
</template>
<script>
export default {
  inject: ['reload'],
  methods: {
    //  Low-order component ,  Refresh 
    fun () {
      this.reload()
    }
  }
}
</script>

Advantage comparison

Method 1 calls the function directly, will cause the entire website to refresh, will waste some performance, the user experience is not good; When a large website is refreshed like this, you need to wait for a few seconds to see the refreshed animation in the upper left corner of the browser; Method 2 uses provide/inject, users will not feel the refresh, and the refresh page content range can be controlled, the relative waste performance will be much less

The above is the application of provide and inject refresh Vue page method details, more information about Vue page refresh please pay attention to other related articles on this site!