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. PHP跨域jsonp方式

    <?php header('Access-Control-Allow-Origin:*');//注意!跨域要加这个头 上面那个没有 $arr = array ('a'=>1,'b'=> ...

  2. 背景图片固定不随页面上下滚动而滚动 ,属性 background-attachment

    <div id="testimonials-section" class="text-center"> </div> css: #tes ...

  3. [APIO2014]序列分割

    嘟嘟嘟 复习一下斜率优化,感觉已经忘得差不多了-- 这题切入点在与答案跟切的顺序无关. 证明就是假如有三段权值分别为\(x, y, z\),那么这两刀不管按什么顺序切,得到的结果都是\(xy + xz ...

  4. 【转】SpringBoot启动服务的三种方式

    1.IDEA启动 2.命令行启动 首先将命令行位置跳转到当前项目的根目录下,再输入“mvn spring-boot:run”命令,初次操作maven需要下载插件等待几分钟 3.命令行编译为jar启动 ...

  5. python __init__() 和__new__()简析

    先看下面一个例子: 如上图,例1中,构造了函数Foo,并重写了__new__()和__init__()方法,在实例化Foo()的时候,却只调用了__new__() 例2中,在实例化Too()对象时,同 ...

  6. jmeter学习记录--07--jmeter元件

    通过jmeter元件可以模拟负载.参数化.设置关联.设置检查点.设置集合点.控制场景运行.监控测试结果等. 1.逻辑控制器:比如foreach控制器,查询到了订单并要对每个订单进行出库操作,以订单号作 ...

  7. jmeter学习记录--03--jmeter负载与监听

    jmeter场景主要通过线程组设置完成,有些复杂场景需要与逻辑控制器配合. 一.测试计划设计与执行 场景设计 jmete线程组实际是一个线程池,根据用户设置进行线程池的初始优化,在运行时做各种异常的处 ...

  8. spring和mybatis的整合配置

    参考自: http://www.cnblogs.com/wangmingshun/p/5674633.html 链接中的文章里一共有三种整合方式,太多了怕记混了. 我这里只保留第二种. spring中 ...

  9. mysql 导入出csv

    load data infile '/var/lib/mysql-files/ip_address.csv' into table ip_address fields terminated by ', ...

  10. 雷军微博拧螺丝，CFO为粉丝数发愁

    导读 小米集团联合创始人.品牌战略官黎万强4年前写的书<参与感>,估计又要热卖了. 3月24日,小米CFO周受资发微博,“我刚接受了同事的挑战,要在一定时间内在微博上有更多的粉丝”,并向粉 ...