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为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
随机推荐
- 无post按钮提交表单
<form id="form1" name="form" action="url" method="GET"> ...
- 20 python 初学(logging模块)
学习网站:https://www.cnblogs.com/yuanchenqi/articles/5732581.html logging 模块: # _author: lily # _date: 2 ...
- [Unity优化]批处理04:MaterialPropertyBlock
参考链接: https://blog.csdn.net/liweizhao/article/details/81937590 1.在场景中放一些Cube,赋予一个新材质,使用内置shader(Unli ...
- (hdu) 4857 逃生 (拓扑排序+优先队列)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4857 Problem Description 糟糕的事情发生啦,现在大家都忙着逃命.但是逃命的通道很窄 ...
- 软件工程(GZSD2015) 第二次作业小结
第二次作业,从4月7号开始,陆续开始提交作业.根据同学们提交的作业报告,相比第一次作业,已经有了巨大改变,大家开始有了完整的实践,对那些抽象的名词也开始有了直观的感受,这很好.然后有一些普遍存在的问题 ...
- 2 数据分析之Numpy模块(1)
Numpy Numpy(Numerical Python的简称)是高性能科学计算和数据分析的基础包.它是我们课程所介绍的其他高级工具的构建基础. 其部分功能如下: ndarray, 一个具有复杂广播能 ...
- ZabbixServer安装
Zabbix服务端安装主要分二种一直yum在线安装,一种离线安装,在线安装只需简单命令自己便可安装离线安装得自定义路径等等...比较繁琐不过便于文件管理.这里简单配置一下在线安装. https://w ...
- codeforces645B
Mischievous Mess Makers CodeForces - 645B It is a balmy spring afternoon, and Farmer John's n cows a ...
- [模板] 动态树/LCT
简介 LCT是一种数据结构, 可以维护树的动态加边, 删边, 维护链上信息(满足结合律), 单次操作时间复杂度 \(O(\log n)\).(不会证) 思想类似树链剖分, 因为splay可以换根, 用 ...
- java querydsl使用
1 POM文件 <?xml version="1.0"?> <project xsi:schemaLocation="http://maven.apa ...