美文网首页
Vue实例挂载的过程中发生了什么

Vue实例挂载的过程中发生了什么

作者: 青城墨阕 | 来源:发表于2022-06-07 11:30 被阅读0次
生命周期 image.png
  • 根元素是不可以放在body或者html上的
  • 可以在对象中定义template/render或者直接使用template,el表示元素选择器
  • 最终都会解析成render函数,调用解析的函数,然后template会被解析成render函数
  • 对template解析步骤大概分为以下几步:
    (1)将html解析成抽象语法树
    (2)将抽象语法树解析成字符串
    (3) 生成render函数
总结:

new Vue的时候:

  1. 先_init方法,在_init方法里面
  • 定义$watch 等;
  • 定义$emit 等事件;
  • 定义_update,$destory生命周期
  1. 调用$mount进行页面的挂载

  2. 挂载的时候主要是通过mountComponent方法

  3. 定义updateComponent更新函数

  4. 执行render函数生成虚拟dom

  5. _update将vnode生成真实的dom结构,并且渲染到页面上

相关文章

  • Vue实例挂载的过程中发生了什么

    根元素是不可以放在body或者html上的 可以在对象中定义template/render或者直接使用templa...

  • Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载author: @TiffanysBear 实例挂载主要是 $mount ...

  • vue学习

    vue 1 . 挂载点、实例和模板 挂载点:vue实例el属性对应的dom节点。vue只处理挂载点的下的内容 模板...

  • Vue实例挂载过程($mount)

    Vue中我们通过$mount实例方法挂载vm,$mount方法在多个地方有定义,因为vue可以跨平台例如weex进...

  • vue基础学习笔记

    1.vue实例、挂载点、模板创建vue实例:new Vue({el:"#root"})el含义:这个实例接管id=...

  • vue实例挂载的实现过程

    Vue 是通过$mount实例方法去挂载vm的,$mount方法在多个文件中都有定义,如src/platform/...

  • vue 生命周期

    什么是vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程...

  • Vue 面试题汇总

    什么是vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程...

  • VUE生命周期面试题

    什么是vue生命周期? Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载...

  • 聊聊 Vue 生命周期的那些事

    什么是vue生命周期? Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom...

网友评论

      本文标题:Vue实例挂载的过程中发生了什么

      本文链接:https://www.haomeiwen.com/subject/pqaqmrtx.html