vue2

1.keep-alive

作用：可以帮助我们缓存组件实例，而不是每次切换时重新渲染他们。
原理：当你将组件包裹在标签时，vue会为这个组件维护一个缓存。这个缓存保存了组件的状态（state）和DOM结构。当组件再次被激活时，vue不会重新执行组件的创建过程，而是直接从缓存中获取已有的组件实例，并将其插入到DOM中。 keep-alive会影响被包裹组件的生命周期钩子。当组件首次被创建并插入到DOM中时，会触发created和mounted钩子。但是当组件被缓存后，在被重新激活时，不会触发created和mounted钩子。同样的，当组件被缓存起来时，会触发deactived钩子。

<template>  
  <div>  
    <keep-alive>  
        <component :is="currentView"></component>  
    </keep-alive>  
   </div>  
</template>  

<script>  
  export default {  
    data() {  
        return {  
        currentView: 'Home'  
        }  
        },  
    components: {  
        Home: { /* home component definition */ },  
        About: { /* about component definition */ }  
        }  
  }  
</script>
  //  Home和About组件将被缓存，当currentView发生变化时，对应的组件将被激活或者停用

清除缓存 :有时可能遇到手动清除某个特定组件的缓存，或者清除所有组件的缓存。vue没有提供这样的api，可以通过改变一个条件来控制是否启动缓存，或者利用生命周期钩子，在适当的时候销毁组件已达到清除缓存的效果。

vue组件动态加载的方式

1.异步组件

1.1 vue允许将组件定义为异步组件，从而在需要时加载他们，这可以通过使用import()函数来实现，

const AsyncComponent = () => import('./components/MyComponent.vue');  
  
export default {  
  components: {  
    AsyncComponent  
  }  
}

1.2 使用defineAsyncComponent（vue3）

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('MyComponent.vue'));

export default {
  components: {
    AsyncComponent
  }
}`

1.3 预加载

异步组件还可以结合webpackchunkName提供命名，从而优化网络请求

    const AsyncComponent = () => import(/* webpackChunkName: "my-component" */ './components/MyComponent.vue');

2. 路由懒加载

在vue router中路由懒加载是常用的动态加载组件的方式。通过在路由定义中使用异步组件，可以实现按需加载。

const routes = [  
  {  
    path: '/my-component',  
    component: () => import('./components/MyComponent.vue')  
  }  
];

3. 动态组件

vue提供了标签，可以根据条件动态渲染组件。这种方式适合在运行时根据某些状态选择不同的组件

<template>  
  <component :is="currentComponent"></component>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      currentComponent: 'AsyncComponent'  
    };  
  },  
  components: {  
    AsyncComponent: () => import('./components/MyComponent.vue'),  
    AnotherComponent: () => import('./components/AnotherComponent.vue')  
  }  
}  
</script>

4. vue中数据改变后，组件不更新

4.1 确认响应式

确保数据是响应式数据。如果你是在vue实例中的data对象定义的数据，那么他们的数据是响应式的

4.2 检查异步更新队列

vue为了提高性能，在数据变化后会延迟更新DOM。可以使用$nextTick方法来获取最新的DOM

4.3 手动触发更新 $forceUpdate(慎用)

4.4 使用Vue.set或this.$set方法

    Vue.set(this.object, 'newProp', 123)  
    // 或者  
    this.$set(this.object, 'newProp', 123)