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. 傲骨贤妻第一季/全集The Good Wife迅雷下载

    第一季 The Good Wife Season 1 (2009)看点:在经受丈夫Peter的背叛以及因此而带来的公众羞辱后,Alicia Florrick选择重新继续自己原来的事业,一名辩护律师,以 ...

  2. [转]mysqldump备份还原和mysqldump导入导出语句大全详解

    FROM : http://www.cnblogs.com/zeroone/archive/2010/05/11/1732834.html mysqldump备份还原和mysqldump导入导出语句大 ...

  3. No identifier specified for entity: springboot-jpa报错No identifier specified for entity

    说明:此次学习使用了springboot框架,jpa注解映射实体类 1,No identifier specified for entity: com.tf.model.User 看到此错误第一反应百 ...

  4. javascript中使用new与不使用实例化对象的区别

    我们先来看个实例 function Me(name,age,job){ this.name = name; this.age = age; this.job = job; } 请问这以下两种实例化对象 ...

  5. CF 329A(Purification-贪心-非DLX)

    A. Purification time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  6. CentOS6.4下安装Chrome

    因为蛋疼的glibc问题,(我就纳闷了,为何CentOS支持的glibc的版本就那么低呢,害得我至今还没把genymotion安装上), Chrome浏览器一直没安装上,不过终于找到了解决方案,安装派 ...

  7. Tensorflow 模型持久化saver及加载图结构

    主要内容: 1. 直接保存,加载模型; (可以指定加载,保存的var_list) 2. 加载,保存指定变量的模型 3. slim加载模型使用 4. 加载模型图结构和参数等 tensorflow 恢复部 ...

  8. 在OneNote中快速插入当前日期和时间

    做笔记,难免有时需要记录当时的时间,记住这个快捷键会让记笔记的效率提升一点. To insert the current date and time, press Alt+Shift+F. To in ...

  9. css3新增样式介绍

    在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性: 1.css3 ...

  10. MFC中如何给静态文本框添加消息响应

    需要两个步骤: 第一个: 是改变它的ID(默认情况下所有的静态文本框的ID都为IDC_STATIC,你需要改变他的ID为其他的值). 第二个: 是在它的属性对话框中选中Notify选项,VS是将该属性 ...