vue框架整体流程
1、整体流程
(1)模板解析成render函数
(2)响应式监听
(3)首次渲染,显示页面,绑定依赖
(4)data属性变化,触发rerender
2、模板解析为render函数
参考上一篇博客。
模板的所有信息都被render函数包含。
模板中用到的data属性,都变成了js变量
模板中的v-for等都变成了js逻辑
render函数返回vnode
3、响应式监听
响应式监听主要使用的是:Object.defineProperty方法。
4、首次渲染,显示页面,绑定依赖
记住在首次渲染时,会收集依赖,只收集触发Object.defineProperty下get方法的属性,其他的不收集,避免重复渲染。
主要使用的_update 方法。
__patch__方法将vnode渲染为DOM,完成初次渲染。
5、data属性变化触发重新渲染
set监听到属性变化
set中执行updateComponent
updateComponent执行vm._render
生成vnode和prevVnode,通过patch比对
重新渲染dom,生成html。
vue框架整体流程的更多相关文章
- ELK 框架整体流程编写 以及logstash脚本编写
Elasticsearch Elasticsearch 是一个实时的分布式搜索和分析引擎,它可以用于全文搜索,结构化搜索以及分析.它是一个建立在全文搜索引擎 Apache Lucene 基础上的搜索引 ...
- Vue 框架-12-Vue 项目的详细开发流程
Vue 框架-12-Vue 项目的详细开发流程 首先,如果你还不了解 Vue 脚手架怎么搭建? 默认的环境中有哪些文件? 文件大概是什么作用? 那么,您要先查看之前的文章才有助于你理解本篇文章: Vu ...
- Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置
Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置 这是上一篇对目录简单介绍: 关于编辑器,可以使用轻量级的 Sublime Text 3,我使用的是 HBuilder, 但 ...
- vue源码实现的整体流程解析
一.前言 最近一直在使用vue做项目,闲暇之余查阅了一些关于vue实现原理的资料,一方面对所了解到的知识做个总结,另外一方面希望能对看到此文章的同学有所帮助.本文如有不足之处,还请过往的大佬批评指正. ...
- Vue框架Element的事件传递broadcast和dispatch方法分析
前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
- 基于VUE框架 与 其他框架间的基本对比
基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03 11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...
- vue2源码框架和流程分析
vue整体框架和主要流程分析 之前对看过比较多关于vue源码的文章,但是对于整体框架和流程还是有些模糊,最后用chrome debug对vue的源码进行查看整理出这篇文章.... 本文对vue的整体框 ...
- VUE框架的初识
VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...
- Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案
需求场景: 非推荐商品详情页返回的时候弹出弹窗推荐商品,点击弹窗按钮可以直接访问推荐商品: 只有直接进入商品详情页返回才会弹出推荐商品弹窗: 每个用户访问只能弹一次(除非清除缓存). 需求分析: 1. ...
随机推荐
- nginx 获取自定义header头部信息
为了排查线上的bug,需要在nginx的日志中,打印客户端上传上来的header头部信息,同时头部信息是自定义的.在尝试多重方案后,找到解决方法: log_format dm '"$remo ...
- 苹果无法连接到itunes store怎么办
方法1:设置--还原--还原网络设置,再进app store就可以了.方法2:重置访问限制“设置”–> “通用” –> “访问限制”,开启访问限制5秒,然后再关闭访问限制.方法3:重置当前 ...
- bat调用TexturePacker更新SpriteSheet
一款游戏会用到很多图片资源,通常我们会使用TexturePacker工具进行图片的拼接.压缩,为了考虑性能问题,单个SpriteSheet的尺寸不会设置的太大(最大1024 * 1024),这样就可能 ...
- ios成长之每日一遍(day 7)
今天到UITabBarController 结合 UIPickView, 这里一共有5个实现, 由浅到易. 其实在IB上面使用UITabBarController很简单, 就像平常拖控件一样拖到界面上 ...
- 分享到微信、微博、QQ空间、QQ微博
一:分享到微信 //分享到微信$("#weixin").bind("click", function () { var p = { url: ...
- [转]Apache 配置虚拟主机三种方式
转自: http://www.cnblogs.com/hi-bazinga/archive/2012/04/23/2466605.html 一.基于IP 1. 假设服务器有个IP地址为192.168. ...
- 奇怪吸引子---BurkeShaw
奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...
- 第二章 BIO与NIO
<netty权威指南>读书笔记 一.BIO 1.服务端程序: package bio; import java.io.BufferedReader; import java.io.IOEx ...
- linux shell grep/awk/sed 匹配tab
处理文件的命令实在是多, sed, awk, grep等.遇到了需要匹配tab的情况, 记录一下. 例子如下:找出文本中第一列是1的行. 文本a 解法1 : 直接使用正则表达式, ^表示开头, \t表 ...
- go语言之进阶篇借助bufio实现按行读取内容
1.借助bufio实现按行读取内容 示例: package main import ( "bufio" "fmt" "io" "o ...