首页 > 其他分享 >Vue实例挂载的过程中发生了什么?

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

时间:2023-03-06 13:45:11浏览次数:45  
标签:Vue 函数 render 实例 template 挂载 解析

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

 

 

 

 

 

 

  • 根元素是不可以放在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,函数,render,实例,template,挂载,解析
From: https://www.cnblogs.com/meirongliu/p/17183533.html

相关文章

  • vue中element table 单选,添加单选框
        参考:https://blog.csdn.net/qq_45780380/article/details/126272154......
  • Spring Boot&Vue3 前后端分离 实战 wiki 知识库系统<一>--Vue CLI 项目搭建目搭建
    接着上一次​​SpringBoot&Vue3前后端分离实战wiki知识库系统<二>---后端架构完善与接口开发​​的继续往下,这次则开始涉及到前端Vue框架的学习了,为之后的后台界面搭建......
  • 初识VUE响应式原理
    作者:京东零售吴静自从Vue发布以来,就受到了广大开发人员的青睐,提到Vue,我们首先想到的就是Vue的响应式系统,那响应式系统到底是怎么回事呢?接下来我就给大家简单介绍一下Vue......
  • Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>--Vue3 + Vue CLI 项Vue3 +
    接着上一次https://www.cnblogs.com/webor2006/p/17139526.html的继续往下,这次则开始涉及到前端Vue框架的学习了,为之后的后台界面搭建打好地基。了解Vue和VueCLI及其关系......
  • vue-cli-service
    是一个构建(build)编译vue项目的工具,提供了服务页面渲染的功能(serve)它的功能就是把vue源码编译为静态页面输出到dest指定的目录。通常是dist目录,build构建运行后输出到di......
  • vue2项目增加eslint配置代码规范示例
    eslint用于代码检查,prettier用于代码格式化,具体操作如下1.安装以下eslint插件安装以下eslint插件,并增加.eslintrc.js配置文件,.eslintignore配置忽略检查的文件(1)eslint......
  • jeroMQ操作ZMQ实例
    ZMQ即zeroMQ,ZMQ并不像是一个传统意义上的消息队列服务器,事实上,它也根本不是一个服务器,它更像是一个底层的网络通讯库,在SocketAPI之上做了一层封装,将网络通讯、进程通讯和......
  • 使用vue ant design 分页以及表格分页改为中文
    <template><divid="app"><a-config-provider:locale="locale"><router-view/></a-config-provider></div></template><script>importzhC......
  • Vue+axios 解决跨域
    Vue+axios如何解决跨域问题?跨域问题是由于浏览器的同源策略限制导致的,同源策略是浏览器的一种安全策略,目的是保障用户的信息安全,防止恶意网站窃取数据。同源策略的限制......
  • Vue学习笔记之npm install编译时报"Cannot read properties of null (reading ‘pickA
    0x00概述在启动项目时候,没注意node版本,直接npminstall遇到该错误;该错误主要是由node高低版本导致的。 0x01node版本一致/**1.重新安装node解决2.删了nod......