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. net core 添加cors,解决跨域问题

    ConfigureServices //允许跨域 services.AddCors(options => { options.AddPolicy("any", builder ...

  2. 从NLP视角看电视剧《狂飙》,会有什么发现?

    目录 1.背景 2.数据获取 3.文本分析与可视化 3.1 短评数据预处理 3.2 词云图可视化 3.3 top关键词共现矩阵网络 3.4 <狂飙>演职员图谱构建 4.短评相关数据分析与可 ...

  3. LeetCode-1609 奇偶树

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/even-odd-tree 题目描述 如果一棵二叉树满足下述几个条件,则可以称为 奇偶树 : 二叉 ...

  4. 第三周作业-N67044-张铭扬

    1. 图文并茂说明raid0,raid1, raid10, raid01, raid5等原理. "RAID"是指独立硬盘冗余阵列(RAID, Redundant Array of ...

  5. php 实现CURL请求接口

    $ch = curl_init (); //初始化 @curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查 @curl_setopt($ ...

  6. python 搭建自启动FTP服务器,编译后exe后个人随时可用,非常方便

    import win32apiimport win32conclass AutoRun: """ itemname:要添加的项值名称 , path:要添加的exe路径绝对 ...

  7. LESS-8

    根据题目,这是一道布尔型注入.页面只有返回正常和不正常两种. payload: ' and substr(database(),1,1)='s' --+  判断当前数据库名的第一个字母,是's'页面就 ...

  8. dart 学习笔记

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

  9. 【c#】csharp_learn

    csharp learn JSON C#解析JSON字符串总结 https://www.cnblogs.com/nc923/p/11418583.html c#解析json字符串处理(最清晰易懂的方法 ...

  10. linux磁盘读写速度测试

    磁盘读写速度标准 1.机械硬盘读写速度平均60---80M每秒. 2.固态硬盘不同品牌型号之间,平均大约在150---300M每秒. 3.5400转的笔记本硬盘:50-90MB每秒. 4.7200转的 ...