vue的响应式和react的函数式编程思想是很不同的。

vue最基本的原理是对getter和setter的代理模式。以及观察者模式。

当数据发生变化时,通知观察者。

而watcher是通过触发数据的getter,成为观察者的。

vue的生命周期中,

在create阶段,vue创建了实例。

在mount 阶段,vue初始化了响应式(数据劫持)。

在update阶段,通过dom diff, vue可以做到对未改变的dom的复用。同一层的如果有设置key,diff得时候就不需要去一一对比,速度会更加快。

首先,vue是如何做到把template最后变成dom元素的呢?

1.通过正则处理template,生成ast之后,经过优化(静态标记),再生成字符串。

2.把字符串作为参数传给 new Function。生成render函数。

3.执行render函数,生成vnode,也就是虚拟dom.

4.patch,如果是在初始化过程中,就根据vnode直接创建dom,否则就进行dom diff。

5.替换挂载dom节点。

(子组件其实是在父组件patch的时候才开始create的,但是最先完成patch)

(vue代码有不同作用域的同名函数。。createComponent)

当最内部的子组件__patch__完毕之后,,vue通过restore操作activeInstance(递归)创建了prent和children的引用关系。

至于组件slot的处理,是在执行render函数的过程中,用parse出来的children代替了<slot>

watcher分为3种,第一种是renderWatcher,就是实现dom响应式的主watcher,一种是computed watcher,加了缓存,如果数据不改变就用缓存的数据,另外一种就是用户的watch了。其中有immediate,deep等差异。

总之,就不贴具体代码啦

Vue源码主体分析的更多相关文章

  1. vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)

    vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...

  2. 前端Vue 源码分析-逻辑层

    Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...

  3. [Vue源码分析] v-model实现原理

    最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...

  4. vue源码构建代码分析

    这是xue源码学习记录,如有错误请指出,谢谢!相互学习相互进步. vue源码目录为 vue ├── src #vue源码 ├── flow #flow定义的数据类型库(vue通过flow来检测数据类型 ...

  5. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

  6. Vue源码分析(一) : new Vue() 做了什么

    Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计 ...

  7. vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...

  8. vue源码入口文件分析

    开发vue项目有段时间了, 之前用angularjs 后来用 reactjs 但是那时候一直没有时间把自己看源码的思考记录下来,现在我不想再浪费这 来之不易的思考, 我要坚持!! 看源码我个人感觉非常 ...

  9. 入口文件开始,分析Vue源码实现

    Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...

  10. Vue源码后记-钩子函数

    vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...

随机推荐

  1. linus->查看文件及文件夹大小相关命令

    背景: 经常会遇到服务器服务突然停了,去服务器一看服务正常运行. 然后在排查服务器容量,发现100%使用. 那么记下来一些常用命令是有必要的. 相关命令: df -hl   查看占用情况. du -s ...

  2. abap链接My sql

    Linux中ODBC源的建立--MySQL 需要用到数据库,但我用的是Linux,只能在下面安装ODBC和MYSQL     1.安装必要的包         安装ODBC     sudo apt- ...

  3. Servlet简介和ServletContext

    0x01: 什么是Servlet? 是sun公司开发动态web的技术 实现了servlet接口的Java程序 0x02: Servlet的实现类有哪些? Servlet接口默认有两个实现类 HttpS ...

  4. Springboot2.0解决跨域问题

    解决办法: import org.springframework.context.annotation.Configuration; import org.springframework.web.se ...

  5. 如何使用纯JS过掉淘宝滑块

    起因 众所周知淘宝滑块很难过掉,今天博主就专门研究了一下淘宝滑块,之前博主也有研究过但是发现并不好过.今天恰好有个项目需要淘宝登录,就有滑块验证,说明一下博主做的是浏览器插件哦.今天博主打算在研究滑块 ...

  6. python中的上下文管理器以及python内建模块contextlib的contextmanager方法

    上下文管理器 上下文管理器是实现了上下文管理协议的对象,其特有的语法是"with -as".主要用于保存和恢复各种全局状态,关闭文件等,并为try-except-finally提供 ...

  7. UE4笔记索引

    图形 渲染 延迟渲染 三维渲染流程 渲染优化 基本渲染 材质 材质节点组合 节点分类 特别的属性 其他 坐标空间与切线空间 坐标轴 编码 平台相关 UBT编译 命令行 程序到CPU路径 C++与蓝图互 ...

  8. 新的学习历程-python3 基本运算

    1 print(5 / 2) # 2.5 2 print(5 // 3) #1 取整除 3 print(5 % 3) #2 取余数(取模) 4 print(5 ** 2) #25 5的2次方 5 pr ...

  9. Spring的AOP源码解析(二)

    Spring AOP 源码解析 目录 Spring AOP 源码解析 前言 本文使用的调试代码 IOC 容器管理 AOP 实例 ProxyFactory 详解 基于注解的 Spring AOP 源码分 ...

  10. dart 学习笔记

    1.dart 下载安装,vscode 安装dart ,coderunner等 2.dart语法 1)需要入口函数main,或者void(没有返回值) main 2)定义变量 var str='kkk' ...