当前位置:首页 > 软件开放 > 正文内容

vue源码分析视频教程(vue源码解析 github)

软件开放2年前 (2023-03-16)1189

本篇文章给大家谈谈vue源码分析视频教程,以及vue源码解析 github对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

Vue 组件创建的流程源码分析

注册组件第二个参数默认会调用extend,Vue.extend 使用Vue基础构造器 产生子类

Vue.extend() 中data必须是一个函数,继承与Vue,可以new和挂载

Vue.component("",Vue.extend({})) //传入的是对象

这样复用了同一个对象所以改写为,这样new的时候可以拿到全新的对象

因为new Fn的constructor指向的是Parent,所以Sub.prototype需要重写

———————————————— 分割线 ————————————————————

所以在createElement,需要对组件进行处理(要区分组件和普通元素去创建虚拟节点)

判断是不是原始的标签 还是组件的方法

Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化

npm run build

使用vue-cli创建的项目默认导入的是运行时版本并且是ESM模块化方式

核心: 把会改变数组的方法进行修补,当这些方法被调用的时候调用notify方法,遍历数组中的元素,把对象元素进行响应式处理

Watcher分为三类,Computed Watcher, 用户Watcher(监听器),渲染Watcher

模板编译的主要目的是将模板转换为渲染函数

手把手教你读Vue2源码-2

在上一篇中,我们已经学习了怎么搭建环境和查找入口文件、vue初始化方法

这一篇,我们就来学习基本的调试方法,在上篇中,我们已经在test文件夹中创建了一个测试文件,我们在浏览器中打开这个文件

1. 初始化new Vue()

test1.html文件中在初始化app处打断点,按F11走下一步查看,可以看到进入到我们Vue构造函数,调用了init方法

2. this.init(options)

同样打上断点,点击下一步,会进入init方法

3. this.initMixin

在init方法,初始化了各种属性。我们将断点打在合并options的位置,查看一下options合并前后有什么差别:

4. $mount

继续,将断点打到mount方法

5. mountComponent

声明了updateComponent,创建了Watcher

6. _render()

_render获取虚拟dom

7. _update()

_update把虚拟dom转为真实dom

vue源码分析三 -- vm._render()如何生成虚拟dom

我们在上一篇的最后讲解了vm._render是生成虚拟dom的关键,那么我们来看看他是如何生成的,下面是他的源码

createElement在文件../vdom/create-element里面,下面是他的源码

new Vnode 创建的是一个虚拟dom,其实就是一个装有很多属性的对象,和真实的dom做一个映射,目的是去渲染真实的dom,那么为什么不直接去渲染dom,因为vue中dom不仅有create的过程,还有diff,patch的过程。为了使得diff的过程花费的时间更短,虚拟dom就出来了,下面我们来看看new Vnode的源码

【手把手教你搓Vue响应式原理】(五) Watcher 与 Dep

【手把手教你搓Vue响应式原理】(一)初识Vue响应式

【手把手教你搓Vue响应式原理】(二)深度监测对象全部属性

【手把手教你搓Vue响应式原理】(三)observe 以及 ob

【手把手教你搓Vue响应式原理】(四) 数组的响应式处理

之前已经将数据劫持已经全部完成了。

那么,接下来,主要的要点就是在于两点,依赖收集和触发依赖更新。

它的意义主要在于控制哪些地方使用了这个变量,然后,按照最小的开销来更新视图 。

首先,要先明白,依赖是什么,比方说在我们的模板中有 {{a}} ,那么,这个地方就有对于变量 a 的依赖。

在模板编译的时候,就会触发 a 变量的 getter 。

然后,当我们执行 a++; 的时候,那么,我们就要触发依赖的更新,当初模板中 {{a}} 的地方,就要更新,是吧!

所以,我们都是 在 getter 中收集依赖,在 setter 中触发依赖更新 。

这一节的内容,主要就是用来专门讲清楚这两件事情。

依赖收集和触发依赖更新主要由两个类来完成, Dep 和 Watcher 。

Dep 和 Watcher 在设计模式中,就是 发布-订阅者 的模式。

而依赖,你可以理解为所谓的订阅者。

Dep 说白了就是发布者,它的工作就是依赖管理,要知道哪些地方用到了这个变量,可能用到这个变量的地方有很多,所以,它会有多个订阅者。

然后,每个变量都应该有属于自己的 Dep ,因为每个变量所在的依赖位置是不一样的,所以他们的订阅者也不一样。

然后在变量更新之后,就去通知所有的订阅者(Watcher),我的变量更新了,你们该触发视图更新了。

Watcher 说白了就是订阅者,它接受 Dep 发过来的更新通知之后,就去执行视图更新了。

它其实就是所谓的 watch 监听器,变量改变之后,执行一个回调函数。

我们先按照图例来创建我们的 Dep 类

根据我们的需求:

Dep 我们在前面也说了,每个属性都应该有它自己的 Dep ,用来管理依赖。

所以,首先,如果我们在 Observer 中创建 Dep,那不就可以了。毕竟 Observer 会遍历到每一个对象。

所以,很明显,我们可以在 defineReactive 的 get 中收集依赖

因为有了 if(Dep.target) 的判断,所以, 只有绑定 Watcher 的变量触发 getter 时,才会添加依赖 。

这个 Dep.target 其实就是 Watcher 的实例

所以,很明显,我们可以在 defineReactive 的 set 中收调用 notify() 方法告知 Watcher 实例,数据更新了。

至此, Dep 的所有职责,我们已经帮它完成了。

其实照道理应该有一个删除依赖,我们这里就不再扩展了。

首先, Watcher 实例应该大家会相对而言更加好理解点,因为,我们有一个 watch 侦听器,大家一定都很熟悉,这两个其实一样。

我们先按照图例来创建我们的 Watcher 类

根据我们的需求:

这个 parsePath 需要单独拎出来说一下,比方说我们现在有这么一个对象

我们要监听到 a.b.c.d ,所以,我们需要下面的这种格式

所以,这个 get 很明显就有点难度了。 我们需要通过循环 拿到 a.b 然后 .c 然后 .d。

我们将这个方法命名为 parsePath 。

入参接受我们的 b.c.d ,我们可以看到 第一句执行之后 segments=['b','c','d'] ,然后进行第二层,这是返回了一个方法,按照循环,那就是 obj=obj.b = obj=obj.c = obj=obj.d ,所以,就是返回一个对象的 obj.b.c.d,相当于是遍历字符串中的属性树。

在执行 a.b.c.d=55; 的同时,我们的控制台就会输出 ok 55 10 。

【尚硅谷】Vue源码解析之数据响应式原理

关于vue源码分析视频教程和vue源码解析 github的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://chlfg.com/post/12586.html

分享给朋友:

“vue源码分析视频教程(vue源码解析 github)” 的相关文章

软件开发领域知识(软件开发行业知识)

软件开发领域知识(软件开发行业知识)

今天给各位分享软件开发领域知识的知识,其中也会对软件开发行业知识进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、软件开发专业都是学习哪些知识点呢? 2、软件开发一般学什么? 3、软件开发需要学习什么基础知识 4、搞软件开发的需要学习什么知识呀...

快捷指令弄了图标为什么会有两个软件(为什么用快捷指令改了图标却还有另另外的软件出现)

快捷指令弄了图标为什么会有两个软件(为什么用快捷指令改了图标却还有另另外的软件出现)

今天给各位分享快捷指令弄了图标为什么会有两个软件的知识,其中也会对为什么用快捷指令改了图标却还有另另外的软件出现进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、为什么我每次点开一个程序,桌面就会出现两个快捷方式 2、手机桌面出现两个同样软件怎么回事?...

好玩能赚钱的手游排行榜(好玩赚钱的手游排行榜2022)

好玩能赚钱的手游排行榜(好玩赚钱的手游排行榜2022)

本篇文章给大家谈谈好玩能赚钱的手游排行榜,以及好玩赚钱的手游排行榜2022对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、手游搬砖游戏排行榜 2、求游戏赚钱排行榜,有哪些比较靠前的 3、求游戏赚钱排行榜,有哪些比较靠前的? 4、我想问一下手机玩什么游戏最赚人民...

梵客家装十里河总部设计师(北京梵客家装总部)

梵客家装十里河总部设计师(北京梵客家装总部)

本篇文章给大家谈谈梵客家装十里河总部设计师,以及北京梵客家装总部对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、北京前十公装公司有哪些? 2、北京的装修公司太多了,排前靠前的有哪些? 3、北京梵客装饰怎么样? 4、_客家装修公司怎样 5、梵客家装怎么样 梵...

大话西游手游藏宝阁出售条件(大话西游手游藏宝阁交易条件)

大话西游手游藏宝阁出售条件(大话西游手游藏宝阁交易条件)

本篇文章给大家谈谈大话西游手游藏宝阁出售条件,以及大话西游手游藏宝阁交易条件对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、大话西游2藏宝阁多少级可以寄售(卖东西) 2、大话西游手游账号可以交易吗 告诉下流程? 3、大话西游手游藏宝阁异常交易保护说明 4、37...

什么不属于网站推广软件(什么不属于网站推广软件的特点)

什么不属于网站推广软件(什么不属于网站推广软件的特点)

本篇文章给大家谈谈什么不属于网站推广软件,以及什么不属于网站推广软件的特点对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、网络推广的常用软件有哪些? 2、网站推广软件的网站推广软件分类 3、以下不属于网站推广的是 4、免费网络推广工具都有哪些啊? 5、网站...