vue项目初始化流程，项目运行原理

  • 初始化：加载html中引入的文件 // beforeCreate
  • 创建vue实例： // created 
    import App from './App.vue'
const app = createApp(App)
  • 编译模板：vue3将模板编译成渲染函数，渲染函数接收组件的状态作为参数，返回一个虚拟DOM树 // beforeMount
    创建虚拟DOM
    更新视图：对比虚拟DOM差异，更新真实的DOM树
    响应式：自动追踪组件状态，状态变化时重新运行渲染函数
  • 挂载：// mounted 
        app.mount('#app')
  • 渲染
  • 更新前：// beforeUpdate
  • 更新完成： // updated
  • 销毁前：// beforeUnMount
  • 销毁：// unMounted
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容