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. SQL LEN() 函数

    LEN() 函数 LEN 函数返回文本字段中值的长度. SQL LEN() 语法 SELECT LEN(column_name) FROM table_name SQL LEN() 实例 我们拥有下面 ...

  2. C语言的3种参数传递方式

    参数传递,是在程序运行过程中,实际参数就会将参数值传递给相应的形式参数,然后在函数中实现对数据处理和返回的过程,方法有3种方式 值传递 地址传递 引用传递 tips: 被调用函数的形参只有函数被调用时 ...

  3. PHP 练习(新闻发布)

    1.新闻发布主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  4. 随心测试_软测基础_002_<测试工程师_核心技能体系>

    测试工程师核心技能体系构成 测试基础体系:[对象——>方法——>流程].[测试活动类型——>质量] 测试分析体系:[测试对象分析]——>[测试设计(计划.数据.用例.文档)] ...

  5. JAVA获取计算机CPU、硬盘、主板、网络等信息

    通过使用第三方开源jar包sigar.jar我们可以获得本地的信息 1.下载sigar.jar sigar官方主页 sigar-1.6.4.zip 2.按照主页上的说明解压包后将相应的文件copy到j ...

  6. 6-4 The present perfect

    1 Summary The present perfect is an important verb tense in English. It is used to talk about things ...

  7. Flutter之List

    void listDemo() { // 1.list的创建 listCreate(); // 2.多种类型的输出 listPrint(); // 3.添加数据 listAddElement(); / ...

  8. Shell命令-文件压缩解压缩之gzip、zip

    文件及内容处理 - gzip.zip 1.gzip:gzip压缩工具 gzip命令的功能说明 gzip 命令用于压缩文件.gzip 是个使用广泛的压缩程序,文件经它压缩过后,其名称后面会多出 .gz ...

  9. Python——Django-manage.py的内容

    在项目的根目录下(也就是有manage.py的那个目录),运行: python3 manage.py runserver IP:端口--> 在指定的IP和端口启动 python3 manage. ...

  10. jsp篇 之 EL表达式

    EL表达式: 形式:${ } 作用:从一个[范围对象里面取值]或者从一个对象中取值或是向页面输出值. 之前我们使用<% ... %>等形式,并不够简洁. 例如: <% request ...