Vue源码主体分析
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源码主体分析的更多相关文章
- vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...
- 前端Vue 源码分析-逻辑层
Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...
- [Vue源码分析] v-model实现原理
最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...
- vue源码构建代码分析
这是xue源码学习记录,如有错误请指出,谢谢!相互学习相互进步. vue源码目录为 vue ├── src #vue源码 ├── flow #flow定义的数据类型库(vue通过flow来检测数据类型 ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
- Vue源码分析(一) : new Vue() 做了什么
Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...
- vue源码入口文件分析
开发vue项目有段时间了, 之前用angularjs 后来用 reactjs 但是那时候一直没有时间把自己看源码的思考记录下来,现在我不想再浪费这 来之不易的思考, 我要坚持!! 看源码我个人感觉非常 ...
- 入口文件开始,分析Vue源码实现
Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...
- Vue源码后记-钩子函数
vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...
随机推荐
- LeetCode-1765 地图中的最高点
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/map-of-highest-peak 题目描述 给你一个大小为 m x n 的整数矩阵 isWa ...
- Spring构造函数
Spring构造函数 目录 Spring构造函数 一.分析说明 2.1.一个构造函数 java版本 xml配置版 2.2.多个构造函数 源码思路 为什么分越少优先级越高? 一.分析说明 Spring中 ...
- effective python
第8条 用zip函数同时遍历两个迭代器 内置的zip函数可以同时遍历多个迭代器. zip会创建惰性生成器,让它每次只生成一个元组,所以无论输入的数据有多长,它都是一个一个处理的. 如果提供的迭代器的长 ...
- js正则匹配多行文本
原文:https://lwebapp.com/zh/post/regular-expression-to-match-multiple-lines-of-text 需求 最近有小伙伴提了个需求,想用正 ...
- flannel 关闭SNAT
flannel 关闭SNAT 默认情况下,flannel 访问集群外网络是通过 SNAT 成宿主机 ip 方式,在一些金融客户环境中为了能实现防火墙规则,需要直接针对 POD ip 进行进行规则配置, ...
- 设计模式 > 单一职责原则
SOLID原则并非单纯的1个原则,而是由5个设计原则组成的,它们分别是单一职责原则,开闭原则,里氏替换原则,接口隔离原则和依赖反转原则. 单一职责原则(SRP) 定义:一个类或者模块只负责完成一个职责 ...
- gitignore文件中忽略项不起作用的解决方法
在使用git的时候会遇到这样的情况,我们生产的一些class或者target的目录,我不能提交,这个时候我们需要使用gitignore,但是有的时候虽然添加了,但是不起作用. 情况:开发过程中,我们自 ...
- 神奇的Object.assign()
Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 1.Object.assign()可以在对象为一层的时候,实现简单的"深拷 ...
- Java笔记_构造方法/构造器
构造方法/构造器(constructor) 怎么来的?之前在创建对象时,是先把一个对象创建好后,再给这个对象的属性赋值,如果现在要求在创建一个对象时,就直接指定这个对象的属性,该怎么做?此时就可以 ...
- elementUI中table组件前端自己实现序号排序
<el-table-column type="index" label="序号" width="50" align="cen ...