一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。
异步组件
异步组件vue中提供了defineAsyncComponent()方法。接收值是一个Promise的工厂函数。也可以调用reject指示加载失败。该方法还可以接收一个对象作为参数。
import { createApp, defineAsyncComponent } from 'vue';
createApp({
components {
AsyncComponent: defineAsyncComponent(() => {
import('./components/Tea.vue')
})
}
})
生命周期
生命周期分别有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。组件激活周期有activated、deactivated。在beforeCreate时表示实例初始化之后，但是此时$el为undefined，数据属性也不能访问。created时属性，方法，事件都可以使用，但是$el还不可以使用。beforeMount此时$el属性有，但是值为undefined。mounted可以手动监听DOM事件，元素已经渲染完成了。此时可以向服务器请求数据是异步行为。需要注意的是该生命周期不能保证所有的子组件都会被挂载。如果没有获取到可以使用vm.$nextTick。beforeUpdate可以访问dom，手动移除已添加的事件监听器。updated可以使用计算属性或者监听器去对状态更改。beforeUnmount在实例卸载之前都可以使用。unmounted此时所有子组件实例以及指令和监听器都已经移除。
为了捕获错误可以使用errorCaptured。接收的参数有错误对象、发生错误的实例和一个包含错误的字符串。返回值如果为false，防止错误。跟踪虚拟dom重新渲染时可以调用renderTracked，接收的参数是调试器事件。可以跟踪操作的目标对象和键。虚拟dom重新渲染时可以调用renderTriggered，是用来接收调试器事件作为参数，可以知道什么操作触发了重新渲染，和前一个组件类似。我们需要注意的是所有声明周期钩子的this是绑定到实例。但是不能使用箭头函数，因为箭头函数绑定的是父上下文。如果我们访问的话值是undefined。
activated和deactivated用于组件切换，当切换到别的地方时会销毁组价实例。当切换回来时，会重新创建实例。为了给用户更好的体验，可以在界面渲染时增加loading事件。
单文件
单文件可以解决全部定义的组件命名不能重复问题以及没有构建步骤不能使用预处理器。单文件中使用css样式可以使用scopred属性，解决组件之间css污染问题。这个属性表示该样式只能作用于当前组件的元素。
