初始化

在 new Vue() 时会调⽤用_init()进⾏行行初始化,会初始化各种实例例⽅方法、全局⽅方法、执⾏行行⼀一些⽣生命周期、

初始化props、 data等状态。其中最重要的是data的「响应化」处理理。

初始化之后调⽤用 $mount 挂载组件,主要执⾏行行编译和⾸首次更更新

编译

编译模块分为三个阶段

1. parse:使⽤用正则解析template中的vue的指令(v-xxx) 变量量等等 形成抽象语法树AST

2. optimize:标记⼀一些静态节点,⽤用作后⾯面的性能优化,在diff的时候直接略略过

3. generate:把第⼀一部⽣生成的AST 转化为渲染函数 render function

虚拟dom

Virtual DOM 是react⾸首创, Vue2开始⽀支持,就是⽤用 JavaScript 对象来描述dom结构,数据修改的时

候,我们先修改虚拟dom中的数据,然后数组做diff,最后再汇总所有的diff,⼒力力求做最少的dom操作,

毕竟js⾥里里对⽐比很快,⽽而真实的dom操作太慢

Vue的工作原理思路分析:

1、 首先使用Object. defineProperty()的原理来实现劫持监听所有属性

2、 每次在页面中使用一个属性就会产生一个watcher

3、 而watcher是通过dep来管理的,相同的属性的实例在一个dep中统一管理

4、 当其中一个属性变化的时候会通知dep变化,再通知dep中管理的对应的watcher进行变化

vue工作原理分析的更多相关文章

  1. SPI协议及工作原理分析

    说明.文章摘自:SPI协议及其工作原理分析 http://blog.csdn.net/skyflying2012/article/details/11710801 一.概述. SPI, Serial ...

  2. Security:蠕虫的行为特征描述和工作原理分析

    ________________________ 参考: 百度文库---蠕虫的行为特征描述和工作原理分析 http://wenku.baidu.com/link?url=ygP1SaVE4t4-5fi ...

  3. Azure WAF防火墙工作原理分析和配置向导

    Azure WAF工作原理分析和配置向导 本文博客地址为:http://www.cnblogs.com/taosha/p/6716434.html ,转载请保留出处,多谢! 本地数据中心往云端迁移的的 ...

  4. Hadoop生态圈-Zookeeper的工作原理分析

    Hadoop生态圈-Zookeeper的工作原理分析 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   无论是是Kafka集群,还是producer和consumer都依赖于Zoo ...

  5. 原理剖析-Netty之服务端启动工作原理分析(下)

    一.大致介绍 1.由于篇幅过长难以发布,所以本章节接着上一节来的,上一章节为[原理剖析(第 010 篇)Netty之服务端启动工作原理分析(上)]: 2.那么本章节就继续分析Netty的服务端启动,分 ...

  6. AQS工作原理分析

      AQS工作原理分析 一.大致介绍1.前面章节讲解了一下CAS,简单讲就是cmpxchg+lock的原子操作:2.而在谈到并发操作里面,我们不得不谈到AQS,JDK的源码里面好多并发的类都是通过Sy ...

  7. getaddrinfo工作原理分析

    getaddrinfo工作原理分析 将域名解析成ip地址是所有涉及网络通讯功能程序的基本步骤之一,常用的两个接口是gethostbyname和getaddrinfo,而后者是Posix标准推荐在新应用 ...

  8. Mina工作原理分析

    Mina是Apache社区维护的一个开源的高性能IO框架,在业界内久经考验,广为使用.Mina与后来兴起的高性能IO新贵Netty一样,都是韩国人Trustin Lee的大作,二者的设计理念是极为相似 ...

  9. 结合 category 工作原理分析 OC2.0 中的 runtime

    绝大多数 iOS 开发者在学习 runtime 时都阅读过 runtime.h 文件中的这段代码: struct objc_class { Class isa  OBJC_ISA_AVAILABILI ...

随机推荐

  1. woocommerce如何隐藏/显示product meta

    前面我们说了woocommerce如何隐藏SKU,那如果不想显示产品分类category和标签tag呢?我们知道SKU, Category list 和 Tag list在woocommerce产品页 ...

  2. httpHandlers path="*.sky"

    <httpHandlers> <add verb="*" path="*.sky" type="WebAppHttpHandlerT ...

  3. Java+Selenium3方法篇21-webdriver处理浏览器多窗口切换

    经过前面两篇文章的铺垫,我们这篇介绍,webdriver如何处理,一个浏览器上多个窗口之间切换的问题.我们先脑补这样一个测试场景,你在页面A点击一个连接,会在新的tab窗口打开页面B,这个时候,你在页 ...

  4. LG2512/BZOJ1045 「HAOI2008」糖果传递 中位数

    问题描述 LG2512 BZOJ1045 题解 这是一个链状问题的环状版本. 问题最终变为给定数轴上的\(n\)个点,找出一个到他们的距离之和尽量小的点,而这个点就是这些数中的中位数. 网络流24题的 ...

  5. [LeetCode] 377. Combination Sum IV 组合之和之四

    Given an integer array with all positive numbers and no duplicates, find the number of possible comb ...

  6. lombok 异常:Lombok needs a default constructor in the base class less... (Ctrl+F1) Inspe

    这是 Lombok 旧版本的一个bug,之前用的版本是 1.16.22,然后抛出了这个异常,只需要进行版本升级即可,我升级到了当前最新版,如下所示: <!-- https://mvnreposi ...

  7. java web开发入门七(mybatis)基于intellig idea

    mybatis 一. 入门开发步骤 1.导入相关jar包 mybatis3.4.2核心开发包 asm-5.1.jarcglib-3.2.4.jarcommons-logging-1.1.3.jarlo ...

  8. OpenCV像素操作和图形绘制

    像素操作 #include<iostream> #include<opencv2/opencv.hpp> using namespace std; using namespac ...

  9. mysql数据库备份工具xtrabackup

    1.下载二进制安装包 其他高版本测试缺少依赖 2.xtrabackup参数说明 简介:  Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工 ...

  10. ORA-12528: TNS:listener: all appropriate instances are blocking new connections

    Oracle问题:ORA-12528: TNS: 监听程序: 所有适用例程都无法建立新连接 问题原始描述: ORA-12528: TNS:listener: all appropriate insta ...