vue源码解析视频（vuex源码解析）

qiaoqingyi 2023-02-06 610

默认

今天给各位分享vue源码解析视频的知识，其中也会对vuex源码解析进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、Vue源码系列之生命钩子beforeCreate&created
2、asyncComputed源码解析
3、vue-quill-editor 巧妙解决视频样式问题
4、Vue源码系列之生命钩子beforeUpdate&updated

Vue源码系列之生命钩子beforeCreate&created

在实习面试中，Vue相关被问到最多的就是围绕生命周期函数内部所作的一些操作，很多朋友可能了解的就是官网的下图，有时候倒霉遇上硬核点的面试官，深入问些东西就会被怼的哑口无言，本文就是在之前源码的基础上，分析一下，生命周期函数究竟发生了什么

先上图

在分析每个钩子之间究竟干了什么之前，先来看看钩子是怎么触发的，以第一个钩子为例

调用callHook函数并向其传入this和'beforeCreate'字符串，那来看看callHook函数究竟是何方神圣

注意到，该函数一开始，也就是钩子函数进入准备触发前，进行了一个pushTarget()的操作，注释写的是“在钩子函数触发时，禁用依赖收集”，那这个操作是干嘛呢

言归正传，禁用了依赖收集后，创建handlers数组存入合并后options的hook，本例中就是找自定义或者继承来的beforeCreate钩子，然后在invokeWithErroeHandling函数中以此触发，顺序是先触发父级，后自己定义的

而这个invokeWithErroeHandling函数如下

该函数直接就在内部call了钩子，所以钩子内部的this指向vm实例

以上就是钩子函数的触发过程，下面来看不同的生命周期之间究竟干了什么

beforeCreate之前

beforeCreate之后到created

1.对于props：合法化，缓存key进数组方便下次迭代，defineReactive

2.对于data：检验props，methods中是否有重名属性，defineReactive

3.对于methods：代理到vm实例上，方便使用this.method.name调用

4.对于computed：封装成watcher并用该watcher的value缓存该计算属性的value，再在每个计算属性上劫持一层getter和setter，在第一次调用getter的时候，取得最新的value，并将依赖缓存下来，之后再依赖不变的前提下，getter只返回watcher的value而不是又去取一遍值，再依赖发生变化的时候，通知watcher更新，watcher取的最新值作为value，从而实现依赖更新计算属性才更新

5.对于watch：调用$watch封装成一个user watcher，如果有immediate options传入，就在封装的时候就调用一遍callback，有deep options传进来的话就将该属性的所有嵌套属性记为依赖

beforeCreate之前主要是做准备工作，将该实例的options合并整理出来，再把$那些初始话

created之前就是对options做操作，data，props设置数据劫持，methods代理在vm实例上，computed，watch封装成不同类型的watcher

asyncComputed源码解析

在github上面搜索得到大牛已经实现了 asyncComputed , 别人捷足先登了。楼主决定先看一遍它的源码，之后会对他的源码进行拓展。

1.1.1定义插件：Vue.js的插件使用的 install() 。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的对象：

1.1.2使用插件： Vue通过全局 Vue.use(obj||fn) 来安装vue的插件

**1.1.3Vue.use结合install直接使用: **

使用： app.vue

**配置： ** 我们可以通过Vue.mixin 来混合配置

2.2-1 asyncComputed.js

2.2-2 asyncComputed.js 中的 Vue.mixin({})中的beforeCreate()

这里 beforeCreate() 钩子函数初始化数据null，并没有得到数据。

optionData : 得到每一个对应实例中的data（函数或者对象）

this.$options.computed[prefix + key] 给实例的 computed 添加函数 ;

this.$options.data 给Vue实例化组件添加data方法（一个函数，在 created() 的时候执行）

2.2-3 asyncComputed.js 中的 Vue.mixin({})中的Created()

vue-quill-editor 巧妙解决视频样式问题

这里记录用 vue-quill-editor 出现的几个问题：

使用 quill-image-extend-module 扩展组件（上一篇介绍了）

可以针对返回字符串的class进行调整

quill的视频在保存的时候会转成 iframe，视频展示出来的效果不太可控，而且ie浏览器的支持不友好，

所以需要改成 video 原生标签；做这件事的方法有两种，第一种是去替换源码，找到源码写iframe的位置进行重写，网上资料有人这么干了，但是我看了一下源码，不太建议；

第二种：用 replace 去替换返回的要显示的html内容

以上是预览富文本的内容，content 是从后端返回的html内容，只要在前端将iframe标签用 video标签替换一下即可；

Vue源码系列之生命钩子beforeUpdate&updated

在前面四个生命钩子执行完之后，实例正式走上工作岗位，等待数据的变更来进行相应的视图更新，而更新的过程中就会触发update相关钩子

其实beforeUpdate钩子之前我们已经见过面了，就在mount那一篇

new watcher那里，在watcher构造函数传入callback updateComponent之外，在options那里传入了一个before函数，当依赖数据更新时，就会通知这个watcher更新从而更新页面，但watcher不会马上更新，因为在同一个事件循环里如果出现“把a改成b又将b改成c的操作”，那如果是马上更新就会update两次，而如果放在事件队列里等主线程通知完所有watcher update之后再更新就会把重复无意义的更新剔除掉

所以updateComponent函数不会马上执行，而是被添加到一个更新队列，同样的，在本轮事件循环中的所有更新watcher都会被添加到这个队列

最后调用的nextTick函数会保证将flushScheduleQueue这个函数延时到任务队列时执行，而这个函数就是将队列中所有watcher更新，也就是执行run方法

可以看到，在每个watcher执行run之前会查看有没有before函数，也就是上面说到的那个函数，等更新到render watcher也就是mount那时创建的那个watcher，beforeUpdate钩子触发

等到所有watcher更新完后，就会调用callUpdatedHooks这个函数，在里面找到render watcher，触发updated钩子

但注意到官网有一句话

有朋友就会问了，不是所有的watcher都更新完了吗？那怎么不敢保证，大胆点，改成能保证

慢着慢着，这样做bug出现的更大胆，人家那样说是有理由的

正常的父组件包含同步子组件

生命周期都是

父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted

更新生命周期

父beforeUpdate-子beforeUpdate-子updated-父updated