Web面试那些事儿的博客

Vue 3 是一款非常流行的前端框架，被广泛应用于大型互联网企业和个人项目中。我们已经了解了一些常见的 Vue 3 知识，但还有一些不太常见但非常实用的知识点，它们可以帮助我们进一步优化和提升 Vue 3 应用的性能和开发效率。本文将介绍一些不太常见的 Vue 3 知识点。

根据 Vue 官网文档的说明，Vue2 的终止支持时间是 2023 年 12 月 31 日，这意味着从明年开始：Vue2 将不再更新和升级新版本，不再增加新特性，不再修复缺陷虽然 Vue3 正式版本已经发布快3年了，但据我了解，现在依然还有很多业务在使用 Vue2，迟迟没有升级 Vue3。为什么要等到 Vue2 彻底停止维护，才考虑升级 Vue3 这个如此重要的问题呢？？？本文是一篇 Vue2 升级 Vue3 的指南，主要包含以下部分：使用 Vue CLI 搭建 Vue2 工程。

通过前面几篇文章，我们对Vue3中的响应式设计有了初步的了解。面试官：Vue3响应式系统都不会写，还敢说精通？面试官：你觉得Vue的响应式系统仅仅是一个Proxy？Vue3：原来你是这样的“异步更新”而对于每天都在用的计算属性(computed)，我猜你肯定也想窥探其奥妙与原理对吧！走起！！！

这是Vue3源码分析的第三篇，与响应式系统中调度执行有关，其中computedwatch等核心功能都离不开它，可见其重要程度。除了实现可调度性，我们还会借助它来实现vue中一个非常重要的功能，批量更新或者叫异步更新多次修改数据(例如自身num10次)，只进行一次页面渲染（页面只会渲染最后一次num10）。面试官：Vue3响应式系统都不会写，还敢说精通？面试官：你觉得Vue的响应式系统仅仅是一个Proxy？什么是调度执行？指的是响应式数据发生变化出发副作用函数重新执行时，我们有能力去决定副作用函数的。

最近在阅读霍春阳大佬的《Vue.js技术设计与实现》，本文的内容主要来源于这本书，非常喜欢这本非纯源码分析的技术书籍，强烈推荐对Vue底层感兴趣实现的同学阅读，再次膜拜大佬。也许你我素未谋面，但很可能相见恨晚，我是前端胖头鱼Vue3响应式系统都不会写，还敢说精通？[1]中我们实现了一个最基本的响应式系统。它包含以下功能：借助Proxy将一个对象obj变成响应式数据，拦截其get和set操作。通过effect注册副作用函数，并在首次执行副作用函数时完成obj对象的依赖收集（track）。

都说今年是最惨工作年，大厂裁员，小厂跟风，简历投了几百封回信的寥寥无几，金三银四怕是成了铜三铁四，冷冷清清，凄凄惨惨。但是今天的主角，小帅同学却在逆风环境中给了面试官当头一喝，秀了他一身，优秀如他，到底经历了一场怎样的面试？文中的例子和代码都可以点击这里查看希望能一直给大家分享实用、基础、进阶的知识点，一起早早下班，快乐摸鱼。

我已经老了。。。。。既然这样的话那......事情就发在昨天，在我们单位的办公大厅里，有一个产品向我走来。他主动介绍自己，他对我说，“老骥： 你这个页面有问题，很大很大的问题，现在我是特地来告诉你，对我来说，还得辛苦你给我解决问题”我很慌乱.....因为此时我的正在吃早饭，嘴里还有个茶叶蛋我慌忙的咽了下去，提醒焦急的产品：我知道你很急，但.....请你不要着急！！我得一点一点的排查问题。具体业务问题就不交代了，复现代码请见开头具体现象如下,请细品。

为了方便操作，我们都会封装一些全局指令为项目服务，这也会作为一个项目团队的基建。想要开发一个全局自定义指令，我们需要了解其生命周期钩子。

vben这个后台管理系统的框架，基于ant-design-vue组件库封装了很多好用的组件，我们在日常开发中用的最多的就是Table, Form组件了。下面就简单介绍一下。

本质上就是在setupComponent（初始化组件实例属性）中判断是否有setup，如果有将执行并将setup返回值作为组件实例render属性的值。其他逻辑和无状态组件挂载一样，在初始化组件实例（setupComponent）时，需要处理状态数据，将其转换成响应式数据。在设置完新vNode的props后，它将再次遍历旧Vnode，删除新Vnode不存在的属性。h函数的执行还是比较简单的，主要就是上面所讲到的问题，搞清楚就没啥问题了。在当前组件挂载后，我们需要将创建出来的dom元素赋值给vnode的。

创建computedRefEmpl实例，内部通过_dirty变量判断是否触发依赖。触发依赖放在ReactiveEffect的调度器中执行，这样就可以区分普通的响应式数据和computed响应式数据执行了。并且先去触发computed的依赖函数，再去触发普通响应数据的依赖函数。(这样是为了做到computed缓存的)获取computed变量时，触发get value执行，然后收集依赖。并执行传入的依赖getter。并修改_dirty为false，如果依赖数据未变化，那么它将返回缓存的值。

obj.value就是一个reactive返回的代理对象，这里并没有触发set value。不管是对复杂数据类型赋值还是读值，他都值触发refImpl实例的get value。但是对于简单数据类型就不一样了。构建简单数据类型时，他并不是通过代理对象去触发依赖收集和依赖触发的。而是通过refImpl中的get value set value主动去收集依赖和触发依赖的，这就是为啥get value 中的trackValue将依赖收集到ref实例的dep中的原因。ref复杂数据类型。

通过web api `contextMenu`[25]去实现。在元素中绑定事件。并控制菜单的展示和隐藏，菜单的位置。菜单是我们自定义的组件。* 鼠标右键,菜单展示*/left: 0,top: 0})菜单组件。<template></li></li></li></ul>})* 刷新*/* 关闭右侧*/* 关闭其他*/</script>li {margin: 0;

一般我们定义函数声明时，我们需要紧接着定义这个函数的实现，不然会报错。但是我们也可以使用declare来定义该函数的声明，让其在编译阶段不报错。这是因为函数也是一种对象，都具有return a基类字段被初始化基类构造函数运行派生类字段被初始化派生类构造函数运行。

Pinia是新一代的状态管理器，由 Vue.js团队中成员Phan An所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x。并被加入官方账户下。Pinia 有如下特点：支持options api和composition api。完整的 typescript 的支持。去除 mutations，只有 state，getters，actions。actions 支持同步和异步。没有模块嵌套，扁平式的模块组织方式，极大的简化了代码书写过程。自动代码分割。支持vue devtools。

可以声明对象类型, 并且可以指定可读属性readonly和可选属性?age: 20,fn() {我们可以定义相同类型的键值和键名。0: "HTML",1: "CSS",3: "Vue""C": 1972,我们可以通过interface来定义对象中普通的属性和方法的，实际上它也可以用来定义函数类型。没有方法体，只有方法签名。但是还是通过类型别名来定义函数类型较好。

在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就称之为是 状态管理。在vue项目中我们是如何管理自己的状态呢？在Vue开发中，我们使用组件化的开发方式。而在组件中我们定义data或者在setup中返回使用的数据，这些数据我们称之为state。在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View。

使用 defineProperty 时，我们修改原来的 obj 对象就可以触发拦截，而使用 proxy 就必须修改代理对象，即 Proxy 的实例才可以触发拦截。如果是数组类型，我们就递归调用mount函数即可，将子vNode添加到父节点上。我们传统的前端开发中，我们是编写自己的HTML，最终被渲染到浏览器上的，那么它是什么样的过程呢？功能三：patch函数，用于对两个VNode进行对比，决定如何处理新的VNode。直接通过编写的html元素，渲染成真实的dom树，然后就渲染到浏览器了。

路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：后端路由阶段。前后端分离阶段。单页面富应用（SPA）。 下面我们就来介绍一下这些阶段后端路由阶段早期的网站开发整个HTML页面是由服务器来渲染的。服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。但是, 一个网站, 这么多页面服务器如何处理呢?每个页面都有对应的一个网址(url),用户在浏览器中输入对应的url，服务器将返回对应的完整页面。这种情况下渲染好的页面, 不需要单独加载任何的js和css,

下一代前端开发与构建工具。他是解决上一代构建工具的问题：在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等等。所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel。随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多。构建工具需要很长的时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来。开发阶段。

也是需要用到usevue的useIntersectionObserver api[32]，首先将src置空，当进入可视区域，我们就将src赋值回去。stop()})通过vite的Glob[33] 的另一个方法来做到指令自动注册。使用，直接引入所有的模块。案例代码[34]