new Vue()

  _init()

    mergeOptions

   

$watch --> new Watch

   

vm._render  生成VNode

  create diff patch

vm._update  渲染VNode

  createElm

vue组件更新

  数据变化时,触发 渲染watcher的回调函数,进而执行组件的更新过程

  new Watcher

  updateComponent

    vm._update  vm._render()--> vnode

      vm.__patch__

  新旧节点不同

   创建新节点--> 更新占位符节点 --> 删除纠结点 

      

编译

  runtime+ compile

    Vue.prototype.$mount(没有render时重写)

      

Vue.js 技术揭秘(学习) vue流程的更多相关文章

  1. Vue.js 技术揭秘学习 (3) render

    Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node  ,返回的是一个VNode 在 Vue 的官方文档中介绍了 render 函数的第一个参数是 createE ...

  2. Vue.js 技术揭秘学习 (2) Vue 实例挂载的实现

    Vue 中我们是通过 $mount 实例方法去挂载 vm 的 $mount 方法实际上会去调用 mountComponent 方法,mountComponent 核心就是先实例化一个渲染Watcher ...

  3. Vue.js 技术揭秘学习 (1) new Vue 发生了什么

    Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data.props.computed.watcher 等等.

  4. Vue.js 技术揭秘(学习) slot

    slot特性分发父组件的内容 作用域插槽:通过子组件的一些数据来决定父组件实现插槽

  5. Vue.js 技术揭秘(学习) 深入响应式原理 nextTick外传

    microTask  mutationObserve. promise.then macroTask setImmediate. messageChannnel.setTimeout.postMess ...

  6. Vue.js 第1章 Vue常用指令学习

    今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...

  7. Vue.js是什么,vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...

  8. Vue.js系列(一):Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  9. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

随机推荐

  1. jspdf生成pdf并在页面展示

    jspdf调用ouput即可 https://blog.csdn.net/dragonzoebai/article/details/18243823 获取页面生成pdf:jspdf+html2canv ...

  2. Raft与MongoDB复制集协议比较

    在一文搞懂raft算法一文中,从raft论文出发,详细介绍了raft的工作流程以及对特殊情况的处理.但算法.协议这种偏抽象的东西,仅仅看论文还是比较难以掌握的,需要看看在工业界的具体实现.本文关注Mo ...

  3. 互怼、IPO、雷潮、寒冬,2018 互联网圈的那些事儿

    有了人的地方,就会有江湖. 有江湖的地方,就会有门派. 有门派的地方,就会有纷争. 有纷争的地方,就会有兴衰. 2018年马上就要离我们远去了,迎接我们的将会是新的一年——2019年.在整个过去的20 ...

  4. python scapy dns 包字段解析

    qr:   0表示查询报文,1表示响应报文opcode: 通常值为0(标准查询),其他值为1(反向查询)和2(服务器状态请求).aa: 表示授权回答(authoritative answer)tc: ...

  5. 30分钟了解Springboot整合Shiro

    项目结构截图: 项目在结构上没有任何特殊之处,基本就是MVC的传统结构重点需要关注的是3个Entity类.2个Controller类和1个Config类. 首先,提供pom的完整文档结构: <p ...

  6. MySQL数据类型的选择

    +++++++++++++++++++++++++++++++++++++++++++标题:MySQL数据类型的选择时间:2019年2月22日内容:MySQL数据类型的选择范式参考重点:主要讲述MyS ...

  7. HttpInvoker http请求工具类

    import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import j ...

  8. IntelliJ IDEA 2018 设置代码超出限制自动换行(最新版)

    环境信息 * IntelliJ IDEA版本:ULTIMATE 2018.2.3:* 系统:Windows 10: 怎么设置IntelliJ IDEA 2018代码一行的换行宽度限制呢? 设置方法:` ...

  9. Nginx集群session管理的两种方式

    1.IP_HASH 修改nginx配置文件 实现非常简单,但是绑定在一个服务器上了,不能跨越多个服务. 2.redis管理 管理session信息的空间,需要修改tomcat配置文件 下载相应的red ...

  10. Django自带的用户认证auth模块

    一.介绍 基本上在任何网站上,都无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能. 使用Django,我们可以不需要自己写这些功能,因为Dj ...