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框架整体流程的更多相关文章

  1. ELK 框架整体流程编写 以及logstash脚本编写

    Elasticsearch Elasticsearch 是一个实时的分布式搜索和分析引擎,它可以用于全文搜索,结构化搜索以及分析.它是一个建立在全文搜索引擎 Apache Lucene 基础上的搜索引 ...

  2. Vue 框架-12-Vue 项目的详细开发流程

    Vue 框架-12-Vue 项目的详细开发流程 首先,如果你还不了解 Vue 脚手架怎么搭建? 默认的环境中有哪些文件? 文件大概是什么作用? 那么,您要先查看之前的文章才有助于你理解本篇文章: Vu ...

  3. Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置

    Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置 这是上一篇对目录简单介绍: 关于编辑器,可以使用轻量级的 Sublime Text 3,我使用的是 HBuilder, 但 ...

  4. vue源码实现的整体流程解析

    一.前言 最近一直在使用vue做项目,闲暇之余查阅了一些关于vue实现原理的资料,一方面对所了解到的知识做个总结,另外一方面希望能对看到此文章的同学有所帮助.本文如有不足之处,还请过往的大佬批评指正. ...

  5. Vue框架Element的事件传递broadcast和dispatch方法分析

    前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...

  6. 基于VUE框架 与 其他框架间的基本对比

    基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03  11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...

  7. vue2源码框架和流程分析

    vue整体框架和主要流程分析 之前对看过比较多关于vue源码的文章,但是对于整体框架和流程还是有些模糊,最后用chrome debug对vue的源码进行查看整理出这篇文章.... 本文对vue的整体框 ...

  8. VUE框架的初识

    VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...

  9. Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案

    需求场景: 非推荐商品详情页返回的时候弹出弹窗推荐商品,点击弹窗按钮可以直接访问推荐商品: 只有直接进入商品详情页返回才会弹出推荐商品弹窗: 每个用户访问只能弹一次(除非清除缓存). 需求分析: 1. ...

随机推荐

  1. nginx 获取自定义header头部信息

    为了排查线上的bug,需要在nginx的日志中,打印客户端上传上来的header头部信息,同时头部信息是自定义的.在尝试多重方案后,找到解决方法: log_format dm '"$remo ...

  2. 苹果无法连接到itunes store怎么办

    方法1:设置--还原--还原网络设置,再进app store就可以了.方法2:重置访问限制“设置”–> “通用” –> “访问限制”,开启访问限制5秒,然后再关闭访问限制.方法3:重置当前 ...

  3. bat调用TexturePacker更新SpriteSheet

    一款游戏会用到很多图片资源,通常我们会使用TexturePacker工具进行图片的拼接.压缩,为了考虑性能问题,单个SpriteSheet的尺寸不会设置的太大(最大1024 * 1024),这样就可能 ...

  4. ios成长之每日一遍(day 7)

    今天到UITabBarController 结合 UIPickView, 这里一共有5个实现, 由浅到易. 其实在IB上面使用UITabBarController很简单, 就像平常拖控件一样拖到界面上 ...

  5. 分享到微信、微博、QQ空间、QQ微博

    一:分享到微信 //分享到微信$("#weixin").bind("click", function () {    var p = {        url: ...

  6. [转]Apache 配置虚拟主机三种方式

    转自: http://www.cnblogs.com/hi-bazinga/archive/2012/04/23/2466605.html 一.基于IP 1. 假设服务器有个IP地址为192.168. ...

  7. 奇怪吸引子---BurkeShaw

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

  8. 第二章 BIO与NIO

    <netty权威指南>读书笔记 一.BIO 1.服务端程序: package bio; import java.io.BufferedReader; import java.io.IOEx ...

  9. linux shell grep/awk/sed 匹配tab

    处理文件的命令实在是多, sed, awk, grep等.遇到了需要匹配tab的情况, 记录一下. 例子如下:找出文本中第一列是1的行. 文本a 解法1 : 直接使用正则表达式, ^表示开头, \t表 ...

  10. go语言之进阶篇借助bufio实现按行读取内容

    1.借助bufio实现按行读取内容 示例: package main import ( "bufio" "fmt" "io" "o ...