Vue 同步组件和异步组件的差别

同步组件

import componentA from './componentA.vue'
1

异步组件

只在组件需要渲染的时候才进行加载渲染并进行缓存，以备下次访问。

componentA: () => import('./componentA.vue')
1

调用异步组件的方法-延时

setTimeout(() => {
  this.$nextTick(() => {
    console.log(this.$refs.com);
  });
}, 100);
1
2
3
4
5

优点：提升首页渲染速度。

区别

1. nextTick

   父组件获取子组件时：

   同步组件：nextTick可以获取组件。

   异步组件：第一次nextTick之后无法获取组件。

2. 打包

   打包成单独的js文件存储在static/js文件夹里面

3. 生命周期顺序

   异步组件：父组件beforeCreate、created、beforeMount、mounted —>挨个子组件beforeCreate、created、beforeMount、mounted
   

   同步组件：父组件beforeCreate、created、beforeMount —>挨个子组件beforeCreate、created、beforeMount—>挨个子组件mounted—> 父组件mounted