ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

Vue源码主体分析

2021-06-21 19:34:50  阅读:219  来源: 互联网

标签:主体 Vue render dom watcher 源码 diff 组件 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.如果是初始化就根据vnode直接创建dom,否则进行dom diff。

(子组件其实是在父组件的mount阶段才开始create的,但是最先完成mount)

当父子组件都被处理完毕之后,vue通过操作activeInstance创建了prent和children的引用关系。

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

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

 

标签:主体,Vue,render,dom,watcher,源码,diff,组件,vue
来源: https://www.cnblogs.com/xinfangzhang/p/13479659.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有