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为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
随机推荐
- jspdf生成pdf并在页面展示
jspdf调用ouput即可 https://blog.csdn.net/dragonzoebai/article/details/18243823 获取页面生成pdf:jspdf+html2canv ...
- Raft与MongoDB复制集协议比较
在一文搞懂raft算法一文中,从raft论文出发,详细介绍了raft的工作流程以及对特殊情况的处理.但算法.协议这种偏抽象的东西,仅仅看论文还是比较难以掌握的,需要看看在工业界的具体实现.本文关注Mo ...
- 互怼、IPO、雷潮、寒冬,2018 互联网圈的那些事儿
有了人的地方,就会有江湖. 有江湖的地方,就会有门派. 有门派的地方,就会有纷争. 有纷争的地方,就会有兴衰. 2018年马上就要离我们远去了,迎接我们的将会是新的一年——2019年.在整个过去的20 ...
- python scapy dns 包字段解析
qr: 0表示查询报文,1表示响应报文opcode: 通常值为0(标准查询),其他值为1(反向查询)和2(服务器状态请求).aa: 表示授权回答(authoritative answer)tc: ...
- 30分钟了解Springboot整合Shiro
项目结构截图: 项目在结构上没有任何特殊之处,基本就是MVC的传统结构重点需要关注的是3个Entity类.2个Controller类和1个Config类. 首先,提供pom的完整文档结构: <p ...
- MySQL数据类型的选择
+++++++++++++++++++++++++++++++++++++++++++标题:MySQL数据类型的选择时间:2019年2月22日内容:MySQL数据类型的选择范式参考重点:主要讲述MyS ...
- HttpInvoker http请求工具类
import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import j ...
- IntelliJ IDEA 2018 设置代码超出限制自动换行(最新版)
环境信息 * IntelliJ IDEA版本:ULTIMATE 2018.2.3:* 系统:Windows 10: 怎么设置IntelliJ IDEA 2018代码一行的换行宽度限制呢? 设置方法:` ...
- Nginx集群session管理的两种方式
1.IP_HASH 修改nginx配置文件 实现非常简单,但是绑定在一个服务器上了,不能跨越多个服务. 2.redis管理 管理session信息的空间,需要修改tomcat配置文件 下载相应的red ...
- Django自带的用户认证auth模块
一.介绍 基本上在任何网站上,都无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能. 使用Django,我们可以不需要自己写这些功能,因为Dj ...