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. Arduino 串口测试 电脑发数据接收后立马返回

    String comdata = ""; void setup() { Serial.begin(9600); while(Serial.read()>= 0){} //cl ...

  2. Redis数据持久化、数据备份、数据的故障恢复

    1.redis持久化的意义----redis故障恢复 在实际的生产环境中,很可能会遇到redis突然挂掉的情况,比如redis的进程死掉了.电缆被施工队挖了(支付宝例子)等等,总之一定会遇到各种奇葩的 ...

  3. Linux内核入门到放弃-虚拟文件系统-《深入Linux内核架构》笔记

    VFS的任务并不简单.一方面,它用来提供了一种操作文件.目录及其他对象的统一方法.另一方面,它必须能够与各种方法给出的具体文件系统的实现达成妥协,这些实现在具体细节.总体设计方面都有一些不同之处. 文 ...

  4. Skyline 7 版本TerraExplorer Pro二次开发快速入门

    年底了,给大家整理了一下Skyline 7版本的二次开发学习初级入门教程,献给那些喜欢学习的年轻朋友. 我这整理的是Web控件版本的开发示例,里面页面代码保存成html,都可以直接运行的. 测试使用的 ...

  5. 在Asp.Net Core中使用DI的方式使用Hangfire构建后台执行脚本

    最近项目中需要用到后台Job,原有在Windows中我们会使用命令行程序结合计划任务或者直接生成Windows Service,现在.Net Core跨平台了,虽然Linux下也有计划任务,但跟原有方 ...

  6. git中如何撤销部分修改？

    以提问中修改了两个文件a.b为例,假设需要撤销文件a的修改,则修改后的两个文件: 1.如果没有被git add到索引区 git checkout a 便可撤销对文件a的修改 2.如果被git add到 ...

  7. spring cloud实战与思考（二） 微服务之间通过fiegn上传一组文件（上）

    需求场景: 微服务之间调用接口一次性上传多个文件. 上传文件的同时附带其他参数. 多个文件能有效的区分开,以便进行不同处理. Spring cloud的微服务之间接口调用使用Feign.原装的Feig ...

  8. python之正则表达式和re模块一

    摘要:正则表达式 re模块 一.正则表达式:只和字符串打交道,是一种用来约束字符串的规则 1.应用场景: 1,判断某一个字符串是否符合规则:注册页-判断手机号.身份证号 是否合法 注册某个账号的时候, ...

  9. Swift 之Carthage

    1. 安装 $ brew update               //更新brew $ brew install carthage   //下载carthage $ carthage version ...

  10. win+R启动列表

    屌丝才用windows,无奈~ """ Win+R 快速启动的命令: 系统应用程序: calc - 启动计算器 charmap - 启动字符映射表 chkdsk - Ch ...