vue里面进行页面刷新的方法，路由刷新，单组件刷新

在进行vue 开发时，会出现需要刷新页面的情况，可以整个路由刷新，也可以刷新某一个组件

一，路由刷新：

路由刷新比较简单，直接在页面里面调用以下方法即可

 Refresh(){
      this.$router.go(0)
      console.log('刷新当前路由')
    },

二，刷新某个组件

1，使用v-if

当v-if发生变化时，组件会被重新渲染一遍，相当于重新开启生命周期

<template>
  <div  class="hello">
      <div class="animation width">当前页面</div>
      <div @click="Refresh">刷新当前路由</div>
      <div @click="reload">刷新当前组件</div>
      <a-time v-if="update">组件</a-time>
  </div>
</template>
<script>
import aTime from './time'
export default {
  name: 'HelloWorld',
  components:{
    aTime
  },
  data () {
    return {
        update: true
    }
  },
  methods: {
    reload() {
      this.update = false
      // 移除后，重新渲染
      this.$nextTick(() => {
          this.update = true
      })
      console.log('刷新当前组件')
    },
    Refresh(){
      this.$router.go(0)
      console.log('刷新当前路由')
    },
  }
}
</script>

2.利用特殊属性:key

这个方法是通过改变key的值来加载数据，可以是数字，也可以是字符串

<template>
  <div  class="hello">
    <div @click="changeKey">刷新当前组件</div>
    <a-time :key="keyValue">组件</a-time>
  </div>
</template>

<script>
import aTime from './time'
export default {
  name: 'HelloWorld',
  components:{
    aTime
  },
  data () {
    return {
        keyValue: 0,
    }
  },
  mounted() {
  },
  methods: {
    changeKey(){
      this.keyValue+=1;
      console.log('key')
    },
  }
}
</script>

扩展：

key是有唯一的对应关系的，其作用是为了高效更新虚拟demo；如果key不变，不会重新渲染，如果key改变了，则会渲染改变的那一条
例如在使用v-for的时候，我们会用key值

数组                                   
const list = [ 
	{ id:1, name: 'one'},
	{ id:2, name: 'two'}
];
 中间插入一条数据
const list = [ 
	{ id:1, name: 'one'},
 	{ id:3, name: '新的'},
	{ id:2, name: 'two'}
];
插入一条数据
如果是用index来作为key
<div v-for="(item, index) in list" :key="index" >{{item.name}}</div>

之前的数据       
key: 0 index: 0 name: one      
key: 1 index: 1 name: two     
之后的数据                         
key: 0 index: 0 name: one                          
key: 1 index: 1 name: '新的'
key: 2 index: 2 name: two 

这里面的‘新的’和‘two’的key值是发生变化的，所以会重新渲染，如果数据很多，插入的数据又在前面，那便会
大量重复加载；
为了减少不必要的损耗，提高复用性，我们可以用唯一性的item.id 来作为key的值，这样增加数据的时候就只会加载新增的这一条

之前的数据       
key: 1 index: 0 name: one      
key: 2 index: 1 name: two     
之后的数据                         
key: 1 index: 0 name: one                          
key: 3 index: 1 name: '新的'
key: 2 index: 2 name: two