class Dep {// 根据 ts 类型提示，我们可以得出 Dep.target 是一个 Watcher 类型。static target: ?Watcher;// subs 存放搜集到的 Watcher 对象集合subs: Array<Watcher>;constructor() {this.subs = [];}addSub(sub: Watcher) {// 搜集所有使用到这个 data 的 Watcher 对象。this.subs.push(sub);}depend() {if (Dep.target) {// 搜集依赖，最终会调用上面的 addSub 方法Dep.target.addDep(this);}}notify() {const subs = this.subs.slice();for (let i = 0, l = subs.length; i < l; i++) {// 调用对应的 Watcher，更新视图subs[i].update();}}
}
复制代码

<template><div>{{ name }}</div>
</template>
<script>
export default {data() {return {name: ""}},mounted() {console.log(this.$el.clientHeight) // 0this.name = "better"console.log(this.$el.clientHeight) // 0this.$nextTick(() => {console.log(this.$el.clientHeight) // 18});}
};
</script>
复制代码

export function queueWatcher (watcher: Watcher) {...// 因为每次派发更新都会引起渲染，所以把所有 watcher 都放到 nextTick 里调用nextTick(flushSchedulerQueue)
}

复制代码

这里的参数flushSchedulerQueue方法就会被放入事件循环中,主线程任务执行完后就会执行这个函数,对 watcher 队列排序,遍历,执行 watcher 对应的 run 方法,然后 render,更新视图 也就是在执行 this.name = 'better'的时候,任务队列可以理解为[flushSchedulerQueue],然后在下一行的 console.log,由于会更新视图任务flushSchedulerQueue在任务队列中没有执行,所以无法拿到更后的视图 然后在执行 this.$nextTick(fn)的时候,添加一个异步任务,这时的任务队列可以理解为[flushSchedulerQueue, fn], 然后同步任务执行完了,接着按顺序执行任务队列里的任务, 第一个任务执行就会更新视图,后面自然能得到更新后的视图了

nextTick 源码

源码分为两个部分:一个是判断当前环境能使用的最合适的 API 并保存异步函数,二是调用异步函数执行回调队列 1 环境判断 主要是判断用哪个宏任务或者微任务,因为宏任务的消耗时间是大于微任务的,所以先使用微任务, 用以下的判断顺序

• promise
• MutationObserver
• setImmediate
• setTimeout

export let isUsingMicroTask = false; // 是否启用微任务开关
const callbacks = []; // 回调队列
let pending = false; // 异步控制开关，标记是否正在执行回调函数

// 该方法负责执行队列中的全部回调
function flushCallbacks() {
// 重置异步开关
pending = false;
// 防止nextTick里有nextTick出现的问题
// 所以执行之前先备份并清空回调队列
const copies = callbacks.slice(0);
callbacks.length = 0;
// 执行任务队列
for (let i = 0; i < copies.length; i++) {
copiesi;
}
}
let timerFunc; // 用来保存调用异步任务方法
// 判断当前环境是否支持原生 Promise
if (typeof Promise !== ‘undefined’ && isNative(Promise)) {
// 保存一个异步任务
const p = Promise.resolve();
timerFunc = () => {
// 执行回调函数
p.then(flushCallbacks);
// ios 中可能会出现一个回调被推入微任务队列，但是队列没有刷新的情况
// 所以用一个空的计时器来强制刷新任务队列
if (isIOS) setTimeout(noop);
};
isUsingMicroTask = true;
} else if (
!isIE &&
typeof MutationObserver !== ‘undefined’ &&
(isNative(MutationObserver) ||
MutationObserver.toString() === ‘[object MutationObserverConstructor]’)
) {
// 不支持 Promise 的话，在支持MutationObserver的非 IE 环境下
// 如 PhantomJS, iOS7, Android 4.4
let counter = 1;
const observer = new MutationObserver(flushCallbacks);
const textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
characterData: true,
});
timerFunc = () => {
counter = (counter + 1) % 2;
textNode.data = String(counter);
};
isUsingMicroTask = true;
} else if (typeof setImmediate !== ‘undefined’ && isNative(setImmediate)) {
// 使用setImmediate，虽然也是宏任务，但是比setTimeout更好
timerFunc = () => {
setImmediate(flushCallbacks);
};
} else {
// 以上都不支持的情况下，使用 setTimeout
timerFunc = () => {
setTimeout(flushCallbacks, 0);
};
}
复制代码

环境判断结束就会得到一个延迟回调函数timerFunc 然后进入核心的 nextTick

2 nextTick()函数源码 在使用的时候就是调用 nextTick()这个方法

• 把传入的回调函数放进回调队列 callbacks
• 执行保存的异步任务 timerFunc,就会遍历 callbacks 执行相应的回调函数了

export function nextTick(cb?: Function, ctx?: Object) {let _resolve;// 把回调函数放入回调队列callbacks.push(() => {if (cb) {try {cb.call(ctx);} catch (e) {handleError(e, ctx, 'nextTick');}} else if (_resolve) {_resolve(ctx);}});if (!pending) {// 如果异步开关是开的，就关上，表示正在执行回调函数，然后执行回调函数pending = true;timerFunc();}// 如果没有提供回调，并且支持 Promise，就返回一个 Promiseif (!cb && typeof Promise !== 'undefined') {return new Promise((resolve) => {_resolve = resolve;});}
}
复制代码

可以看到最后有返回一个 Promise,是可以让我们在不传参的时候用

this.$nextTick().then(()=>{ ... })
复制代码

vue3 中分析

点击按钮更新 DOM 内容, 并获取最新的 DOM 内容

 <template><div ref="test">{{name}}</div><el-button @click="handleClick">按钮</el-button></template><script setup>import { ref, nextTick } from 'vue'const name = ref("better")const test = ref(null)async function handleClick(){name.value = '掘金'console.log(test.value.innerText) // betterawait nextTick()console.log(test.value.innerText) // 掘金}return { name, test, handleClick }</script>

复制代码

在使用方式上面有了一些变化,事件循环的原理还是一样的,只是加了几个专门维护队列的方法,以及关联到 effect

vue3 nextTick 源码剖析

const resolvedPromise: Promise<any> = Promise.resolve();
let currentFlushPromise: Promise<void> | null = null;

export function nextTick<T = void>(
this: T,
fn?: (this: T) => void,
): Promise<void> {
const p = currentFlushPromise || resolvedPromise;
return fn ? p.then(this ? fn.bind(this) : fn) : p;
}
复制代码

简单来看就是一个 Promise nextTick 接受一个函数为参数,同时会创建一个微任务,在我们页面调用 nextTick 的时候,会执行该函数,把我们的参数 fn 赋值给 p.then(fn) ,在队列的任务完成后, fn 就执行了 由于加了几个维护队列的方法,所以执行顺序是 queueJob -> queueFlush -> flushJobs -> nextTick 参数的 fn

flushJobs 该方法主要负责处理队列任务,主要逻辑如下

• 先处理前置任务队列
• 根据 Id 排列队列
• 遍历执行队列任务
• 执行完毕后清空并重置队列
• 执行后置队列任务
• 如果还有就递归继续执行

vue Router

路由就是一组 key-value 的对应关系,在前端项目中说的路由可以理解为 url-视图之间的映射关系,这种映射是单向的,url 变化不会走 http 请求,但是会更新切换前端 UI 视图,像 vue 这种单页面应用 就是这样的规则.

路由守卫

1. 全局路由守卫

• 前置路由守卫: beforeEach 路由切换之前被调用

• 全局解析守卫:beforeResolve 在每次导航时就会触发,但是确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后 2,解析守卫就被正确调用,如确保用户可以访问自定义 meta 属性requiresCamera  的路由：

router.beforeResolve(async (to) => {if (to.meta.requiresCamera) {try {await askForCameraPermission();} catch (error) {if (error instanceof NotAllowedError) {// ... 处理错误，然后取消导航return false;} else {// 意料之外的错误，取消导航并把错误传给全局处理器throw error;}}}
});
复制代码

router.beforeResolve  是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。

• 后置路由守卫 :afterEach 路由切换之后被调用requiresCamera  的路由：

1. 独享路由守卫

const router = new VueRouter({routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...},},],
});
复制代码

1. 组件內路由守卫 可以在组件内使用者两个钩子

• 通过路由规则,进入该组件时被调用

beforeRouteEnter (to, from, next) {

}
复制代码

• 通过路由规则,离开该组件时调用

beforeRouteLeave (to, from, next) {

}
复制代码

完整的导航解析过程

1. 导航被触发。
2. 在失活的组件里调用  beforeRouteLeave  守卫。
3. 调用全局的  beforeEach  守卫。
4. 在重用的组件里调用  beforeRouteUpdate  守卫(2.2+)。
5. 在路由配置里调用  beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用  beforeRouteEnter。
8. 调用全局的  beforeResolve  守卫(2.5+)。
9. 导航被确认。
10. 调用全局的  afterEach  钩子。
11. 触发 DOM 更新。
12. 调用  beforeRouteEnter  守卫中传给  next  的回调函数，创建好的组件实例会作为回调函数的参数传入。

路由模式

1. history 模式 /: 使用pushState和replaceState,通过这两个 API 可以改变 url 地址不发生请求,popState事件

2. hash 模式# :

   hash 是 URL 中 hash(#)及后面的那部分,常用作锚点在页面内进行导航,改变 hash 值不会随着 http 请求发送给服务器,通过hashChange事件监听 URL 的变化,可以用他来实现更新页面部分内容的操作

vueRouter 的实现

剖析 VueRouter 本质

通过使用 vueRouter 可以知道

1. 通过 new Router() 获得一个 router 实例,我门引入的 VueRouter 其实就是一个类

class VueRouter {}
复制代码

1. 使用 Vue.use(),而 Vue.use 的一个原则就是执行对象的 install 这个方法,所有,我们可以再一步假设 VueRouter 有 install 这个方法 所以得出

//myVueRouter.js
class VueRouter {}
VueRouter.install = function () {};

export default VueRouter;
复制代码

分析 Vue.use

Vue.use(plugin) 用法: 用于安装 vue.js 插件,如果插件是一个对象,必须提供 install 方法,如果插件是一个函数,它会被作为 install 方法,调用 install 方法的时候,会将 vue 作为参数传入,install 方法被同一个插件多次调用时,插件也只会被安装一次

作用: 注册插件,此时只需要调用 install 方法并将 Vue 作为参数传入 1. 插件的类型,可以是 install 方法,也可以是一个包含 install 方法的对象 2. 插件只能被安装一次,保证插件列表中不能有重复的插件

需要将 Vue 作为 install 方法第一个参数传入,先将 Vue 保存起来,将传进来的 Vue 创建两个组件 router-link 和 router-view

//myVueRouter.js
let Vue = null;
class VueRouter {}
VueRouter.install = function (v) {Vue = v;console.log(v);

//新增代码
Vue.component(‘router-link’, {
render(h) {
return h(‘a’, {}, ‘首页’);
},
});
Vue.component(‘router-view’, {
render(h) {
return h(‘h1’, {}, ‘首页视图’);
},
});
};

export default VueRouter;
复制代码

install 一般是给每个 vue 实例添加东西的,路由中就是添加$router和$route,注意:每个组件添加的$router是同一个和$route 是同一个,避免只是根组件有这个 router 值,使用代理的思想

//myVueRouter.js
let Vue = null;
class VueRouter {}
VueRouter.install = function (v) {Vue = v;// 新增代码Vue.mixin({beforeCreate() {if (this.$options && this.$options.router) {// 如果是根组件this._root = this; //把当前实例挂载到_root上this._router = this.$options.router;} else {//如果是子组件this._root = this.$parent && this.$parent._root;}Object.defineProperty(this, '$router', {get() {return this._root._router;},});},});

Vue.component(‘router-link’, {
render(h) {
return h(‘a’, {}, ‘首页’);
},
});
Vue.component(‘router-view’, {
render(h) {
return h(‘h1’, {}, ‘首页视图’);
},
});
};

export default VueRouter;
复制代码

完善 VueRouter 类 首先明确下是实例化的时候传了 v 的参数为 mode(路由模式), routes(路由表),在类的构造器中传参

class VueRouter {constructor(options) {this.mode = options.mode || 'hash';this.routes = options.routes || []; //你传递的这个路由是一个数组表}
}
复制代码

但是我们直接处理 routes 的十分不方便的，所以我们先要转换成 key：value 的格式

createMap(routes) {return routes.reduce((pre,current) => {pre[current.path] = current.componentreturn pre},{})
}
复制代码

手写 vueRouter

vue 模板编译的原理

vue 中模板 template 无法被浏览器解析并渲染,因为这不属于浏览器的标准,不是正确的 html 语法,所有需要将 template 转换成一个 JavaScript 函数,这样浏览器就可以执行这一个函数并渲染出对应的 html 元素,就可以让视图跑起来了,这个过程就叫做模板编译。模板编译又分为三个阶段，解析parse, 优化optimize, 生成generate,最终生成可执行函数render

• 解析阶段 : 使用大量的正则表达式对 template 字符串进行解析,将标签,指令,属性等转化为抽象语法树 AST
• 优化阶段: 遍历 AST,找打其中的一些静态节点进行标记, 方便在页面重渲染的时候进行 diff 比较时,直接跳过这些静态节点,优化 runtime 的性能
• 生成阶段: 将最终的 AST 转化为 render 函数字符串

更新中....

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

面试官_vue的这些原理你了解吗_相关推荐

1. 实战系列-被面试官问到Feign原理

   导语   事情是这样的,昨天参加了某公司二面,被面试官问道了Spring Cloud的RESTFul远程调用.项目上用到的技术就是OpenFeign,面试官可能自己不是太了解,给他解释一番发现自己还有 ...

2. 手写Vuex核心原理，再也不怕面试官问我Vuex原理

   手写Vuex核心原理 文章目录 手写Vuex核心原理 一.核心原理 二.基本准备工作 三.剖析Vuex本质 四.分析Vue.use 五.完善install方法 六.实现Vuex的state 七.实现g ...

3. babel原理_手写webpack核心原理，再也不怕面试官问我webpack原理

   手写webpack核心原理 一.核心打包原理 1.1 打包的主要流程如下 1.2 具体细节 二.基本准备工作 三.获取模块内容 四.分析模块 五.收集依赖 六.ES6转成ES5(AST) 七.递归获取 ...

4. 【面试题】面试官:vue的这些原理你了解吗?

   前言 在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持 ...

5. 面试官:vue的这些原理你了解吗?

   前言 努力! 奋斗! 爱折腾的程序员, 不会没关系, 最重要的是我们一起学习! 在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享 ...

6. 定时器和promise_手写Promise核心原理，再也不怕面试官问我Promise原理

   整体流程的介绍 整体流程的介绍 1. 定义整体结构 2. 实现Promise构造函数 3. 实现then方法 3.实现catch方法 4. 实现Promise.resolve 5.实现Promise. ...

7. 面试官：熔断降级原理是什么？

   仅以两张图来初步形容一下 熔断 适用的场景: 雪崩 股灾   什么是熔断 来自 wiki 的 熔断机制 描述: 熔断机制(英语:Circuit breaker / Trading curb)指的是在股 ...

8. 阿里面试官:说说Redis主从复制原理

   在Redis复制的基础上(不包括Redis Cluster.Redis Sentinel),使用和配置主从复制非常简单,能使得[从Redis服务器](后文称 slave)能精确得复制[主Redis服务 ...

9. Git | 面试官问你 Git 原理，你能回答得出来吗？

   文章目录 原创声明 前言 一.Git 简单介绍 二.解开 Git 在日常上班操作中的神秘面纱 2.1 初始化仓库 git init 2.2 第n次提交 git add xxx git status g ...

最新文章

1. Leangoo英文版来了～
2. 一文梳理视觉Transformer架构进展：与CNN相比，ViT赢在哪儿？
3. 官网的Ext direct包中.NET版的问题
4. SAP Spartacus autofocus directive，如何锁住使用了directive的元素本身？
5. 【MySQL】Linux端-实现Mysql数据定时自动备份
6. python怎么测试程序_python如何测试程序
7. java exec mvn_为`mvn exec：java`设置Java属性
8. Nginx查看并发链接数
9. 学习笔记：工厂方法模式及简单工厂模式的对比
10. win32SDK的hello,world程序(二)
11. linux docker运行exe,如何在docker中运行windows
12. html网页设计作业代码web网页设计实例作业 ——放飞梦想文化主题(3页)
13. 三星c7 linux驱动,三星c7驱动|三星c7手机驱动下载 v1.5.55.0 官方版 - 比克尔下载
14. Gifxing在线图片无损压缩，gif压缩
15. Photoshop抠图(磁性钢笔工具)
16. Android仿微信朋友圈4实现评论动态时输入框和软键盘自动定位到内容下面
17. json表格显示js方法_将JSON导入Google表格的3种最佳方法[最终指南]
18. 为什么现在台式计算机无光驱,为何现在大部分电脑（笔记本和台式机）都取消了光驱？...
19. Java学习笔记 - Chapter 1
20. blood pressure android app,BP(Blood Pressure) Diary

热门文章

1. android实现简单的记账功能
2. 鸿蒙和vivo新系统,鸿蒙系统等来强劲国内竞争对手 vivo正式发布OriginOS系统
3. 物联网设备WIFI模块实现
4. windows安装qt5的步骤
5. python 用基姆拉尔森计算公式求出某一天是星期几
6. 基于arduino的循迹小车（含有PID算法）
7. 私募基金合法吗？私募基金如何防风险？
8. 七大壁纸网站满足所有分辨率需求！
9. 学生如何申请免费IDEA
10. 干货 | 聊聊移动端安全加固