Vue.js 技术揭秘(学习) vue流程
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流程的更多相关文章
- Vue.js 技术揭秘学习 (3) render
Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node ,返回的是一个VNode 在 Vue 的官方文档中介绍了 render 函数的第一个参数是 createE ...
- Vue.js 技术揭秘学习 (2) Vue 实例挂载的实现
Vue 中我们是通过 $mount 实例方法去挂载 vm 的 $mount 方法实际上会去调用 mountComponent 方法,mountComponent 核心就是先实例化一个渲染Watcher ...
- Vue.js 技术揭秘学习 (1) new Vue 发生了什么
Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data.props.computed.watcher 等等.
- Vue.js 技术揭秘(学习) slot
slot特性分发父组件的内容 作用域插槽:通过子组件的一些数据来决定父组件实现插槽
- Vue.js 技术揭秘(学习) 深入响应式原理 nextTick外传
microTask mutationObserve. promise.then macroTask setImmediate. messageChannnel.setTimeout.postMess ...
- Vue.js 第1章 Vue常用指令学习
今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...
- Vue.js是什么,vue介绍
Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
- Vue.js系列(一):Vue项目创建详解
引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
随机推荐
- os模块使用
Python获取当前文件名的两种方法 1,使用python文件默认的‘ file ’属性 2,使用 sys.argv[0] print sys.argv # 输入参数列表print sys.argv[ ...
- Cookie Session 与Token
由于HTTP是一种无状态的协议,服务器端无法知道用户与客户端交互的状态,比如如果一个用于之前已经访问过该服务器,服务器无法知道该用户是第二次访问,Session和Cookie都是用来保存用户与后端服务 ...
- 使用sz/rz基于串口传输文件
关键词:lrzsz.minicom.ZMODEM.MD5sum等. 在环境受限的嵌入式系统上,往往只有串口可以使用. 此时如果需要传输文件,需要借助rz/sz工具,可以使用的传输协议有ZMODEM.Y ...
- PHP性能优化:in_array和isset 在大数组查询中耗时相差巨大,以及巧妙使用array_flip
今天在PHP业务开发中,发现了一个问题. 两个较大数组(20万+元素),遍历其中一个$a,另一个数组$b用于查找元素. 比如 foreach($a as $val){ if(in_array($xx, ...
- 领域驱动设计系列文章(2)——浅析VO、DTO、DO、PO的概念、区别和用处
本篇文章主要讨论一下我们经常会用到的一些对象:VO.DTO.DO和PO. 由于不同的项目和开发人员有不同的命名习惯,这里我首先对上述的概念进行一个简单描述,名字只是个标识,我们重点关注其概念: 概念: ...
- .Net Core应用框架Util介绍(三)
上篇介绍了Util的开发环境,并让你把Demo运行起来.本文将介绍该Demo的前端Angular运行机制以及目录结构. 目录结构 在VS上打开Util Demo,会看见如下的目录结构. 现代前端通常采 ...
- Python--day04(流程控制)
day03主要内容回顾 1.变量名命名规范 -- 1.只能由数字.字母 及 _ 组成 -- 2.不能以数字开头 -- 3.不能与系统关键字重名 -- 4._开头有特殊含义 -- 5.__开头__结尾的 ...
- 判断语句之if..else if...else
判断语句之if..else if...else if语句第三种格式:if..else if...else 格式: 执行流程 首先判断关系表达式1看其结果是true还是false 如果是true就执行语 ...
- codeforces#439 D. Devu and his Brother (二分)
题意:给出a数组和b数组,他们的长度最大1e5,元素范围是1到1e9,问你让a数组最小的数比b数组最大的数要大需要的最少改变次数是多少.每次改变可以让一个数加一或减一 分析:枚举a数组和b数组的所有的 ...
- 《Effective C++》实现:条款26-条款31
条款26:尽可能延后变量定义式的出现时间 C++推荐在使用对象前才定义对象(调用构造函数赋初值) 只在循环中使用的变量定义在循环内部(除非"赋值"成本低于"构造+析构&q ...