2024 前端Vue面试题大全汇总 (82道)_vue面试题2024(2)，2024年最新阿里p7面试题和答案

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

13、DOM 渲染在 哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

14、简单描述每个周期具体适合哪些场景

beforecreate : 可以在这加个 loading 事件，在加载实例时触发

created : 初始化完成时的事件写在这⾥，如在这结束 loading 事件，异步请求也适宜在这⾥调⽤

mounted : 挂载元素，获取到 DOM 节点

updated : 如果对数据统⼀处理，在这⾥写上相应函数

beforeDestroy : 可以做⼀个确认停⽌事件的确认框

nextTick : 更新数据后⽴即操作 dom

15、组件之间是怎么通信的

组件之间通信主要分为三种：父子传参，子父传参，兄弟传参。

1. 父子传参：父组件通过自定义属性的方式传参，通过 props 属性给子组件传参，子组件通过 props 属性去接收参数
2. 子父传参：子组件通过自定义事件的方式传参，通过 $emit 去进行传参。

16、Vue.cli 中怎样使用自定义的组件？

1. 在 components 目录新建组件文件
2. 在需要用到的页面 import 中导入
3. 使用 component 注册
4. 在 template 视图中使用组件标签

17、Vue 如何实现按需加载配合 webpack 设置

• webpack 中提供了 require.ensure( ) 来实现按需加载。以前引入路由是通过 import 这样的方式引入，改为 const 定义方式进行引入
• 不进行页面按需加载引入方式 import home from …/…/common/home.vue
• 进行页面按需加载的引入方式：const home = r =>require.ensure([],() =>require('…/…/common/home.vue))

18、scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？

css 的预编译语言。

使用步骤：

第一步：先装 css-loader、node-loader、sass-loader 等加载器模块；

第二步：在 build 目录找到 webpack.base.config.js，在 extends 属性中加一个拓展. scss；

第三步：在同一个文件，配置一个 module 属性；

第四步：然后在组件的 style 标签加上 lang 属性 ，例如：lang=”scss”；

特性:

• 可以用变量，例如（$变量名称=值）；
• 可以用混合器；
• 可以嵌套

19、如何让 CSS 只在当前组件中起作用？

将当前组件的<style>修改为<style scoped>。

20、聊聊你对 Vue.js 的 template 编译的理解？

简⽽⾔之，就是先转化成 AST 树，再得到的 render 函数返回 VNode（Vue 的虚拟 DOM 节点）

详情步骤：

⾸先，通过 compile 编译器把 template 编译成 AST 语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile 是 createCompiler 的返回值，createCompiler 是⽤以创建编译器的。另外 compile 还负责合并 option。

然后，AST 会经过 generate（将 AST 语法树转化成 render funtion 字符串的过程）得到 render 函数，render 的返回值是 VNode，VNode 是 Vue 的虚拟 DOM 节点，⾥⾯有（标签名、⼦节点、⽂本等等）

21、Vue 路由跳转的几种方式

第一种方式：router-link （声明式路由）

第二种方式：router.push(编程式路由)

第三种方式：this.$router.push() (函数里面调用)

第四种方式：this.$router.replace() (用法同上, push)

第五种方式：this.$router.go(n)

22、Vue 的路由实现：hash 模式和 history 模式

hash 模式 (默认)

工作原理: 监听网页的 hash 值变化 —> onhashchange 事件, 获取 location.hash

使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转

主要用在单页面应用 (SPA)

history 模式

工作原理: 主要利用 history.pushState() API 来改变 URL, 而不刷新页面.

其实一共有五种模式可以实现改变 URL, 而不刷新页面.

需要后台配置支持, 如果输入一个并不存在的 url, 需要后端配置做 “兜底配置”, 不是粗暴的返回 404, 而是返回首页

23、Vue 与 Angular 以及 React 的区别？

基本概念

Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。

React 是一个用于构建用户界面的 JavaScript 库

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

三者比较

相同点

1. 都是基于 javascript/typescript 的前端开发库，为前端开发提供高效、复用性高的开发方式
2. 都有组件和模板的开发思想
3. 各自的组件都有生命周期，不用的组件可以卸载，不占用资源
4. 都支持指令，如样式、事件等的指令

不同点

1. 创始和发行不同：Angular 是由 googl 提供支持的，初始发行于 2016 年 9 月；React 由 Facebook 维护，初始发行于 2013 年 3 月；Vue 是由前 google 人员创建，初始发行于 2014 年 2 月
2. 应用类型不同：Angular 支持开发 native 应用程序、SPA 单页应用程序、混合应用程序和 web 应用程序；React 支持开发 SPA 和移动应用程序；Vue 支持开发高级 SPA，开始支持 native 应用程序
3. 模型不同：angular 基于 MVC（模型 - 视图 - 控制器）架构；react 和 vue 是基于 Virtual DOM（虚拟的文档对象模型）

4、数据流流向不同：Angular 使用的是双向数据绑定，React 用的是单数据流的，而 Vue 则支持两者。

5. 对微应用和微服务的支持不同：Angular 使用的是 TypeScript，因此它更适合于单页 Web 应用（single page web application，SPA），而非微服务。相反，React 和 Vue 的灵活性更适合微应用和微服务的开发。
6. 对原生应用的支持不同：React Native 为 iOS 和 Android 开发原生应用；Angular 的 NativeScript 已被原生应用所采用，特别是 Ionic 框架已经被广泛地运用在制作混合应用等方面；Vue 的 Weex 平台正在开发之中，尚无下一步使之成为全面跨平台的计划。
7. 框架和库：Angular 是一个框架而不是一个库，因为它提供了关于如何构建应用程序的强有力的约束，并且还提供了更多开箱即用的功能。React 和 Vue 是是一种库，可以和各种包搭配。
8. 组件之间传值方式不同：Angular 中直接的父子组件，父组件可以直接访问子组件的 public 属性和方法，也可以借助于 @Input 和 @Output 进行通讯。没有直接关系的，借助于 Service 单例进行通讯；React 组件之间通过通过 prop 或者 state 来通信，不同组件之间还有 Rex 状态管理功能；Vue 组件之间通信通过 props ，以及 Vuex 状态管理来传值

24、vue-router 中导航守卫有哪些？

全局前置守卫、路由独享守卫、组件内守卫

25、 为什么使用 Vue？

• 优点：轻量级的框架、双向数据绑定、组件化开发、单页面路由、学习成本低、虚拟 dom、渐进式框架、数据和结构的分离、运行速度快、插件化
• 缺点：不支持 ie8 以下、社区没有 angular 和 react 丰富、缺乏高阶教程和文档、单页面应用不利用 seo 优化、首次加载时耗时多

26、说出至少 4 种 vue 指令和它的用法？

• v-if：判断是否隐藏；
• v-for：数据循环；
• v-bind:class：绑定一个属性；
• v-model：实现双向绑定

27、v-if 和 v-show 的区别

• v-if 通过控制 dom 节点的方式，添加和删除元素，进而实现显示或隐藏元素，v-show 通过设置 dom 元素的 display 来实现显示或隐藏的操作，并不会删除 dom
• v-if 隐藏会将组件销毁，显示时会将其内部的监听事件重建，v-show 只是设置 display，并不会阻止子组件内部的监听事件
• v-if 有着更高的切换消耗，v-show 有着更高的初始渲染消耗

28、为什么避免 v-if 和 v-for 一起用？

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，只检查它一次，且不会在 v-if 为否的时候运算 v-for。

29、什么是 MVVM ？

• 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
• MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。
• ViewModel 通过双向数据绑定把 View 层和 Model 层连接起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

30、vuex是什么？怎么使用？哪种功能场景使用它？

vue中状态管理。在main.js引入store注入。新建一个目录store 。场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

31、vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

32、vuex的State特性

• Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。
• state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。
• 通过mapState和 mapGetters 把全局 state 和 getters 映射到当前组件的 computed 计算属性中。

33、vuex的Getter特性

• getters 可以对State进行计算操作，它就是Store的计算属性。
• 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。
• 如果一个状态只在一个组件内使用，可以不用getters。

34、vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

35、不用Vuex会带来什么问题？

• 可维护性会下降，想修改数据要维护三个地方；
• 可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
• 增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背。

36、keep-alive 的作用是什么?

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

37、vue-loader 是什么？用途有哪些？

解析.vue文件的一个加载器。

用途：js 可以写es6、style样式可以scss或less、template可以加jade等。

38、如何获取 dom

在我们的 vue 项⽬中，难免会因为引⽤第三⽅库⽽需要操作 DOM 标签，vue 为我们提供了 ref 属性。ref 被⽤来给元素或⼦组件注册引⽤信息。引⽤信息将会注册在⽗组件的 $refs 对象上。如果在普通的 DOM 元素上使⽤，引⽤指向的就是 DOM 元素；如果⽤在⼦组件上，引⽤就指向组件实例

39、iframe 的优缺点？

iframe 也称作嵌⼊式框架，嵌⼊式框架和框架⽹页类似，它可以把⼀个⽹页的框架和内容嵌⼊在现有的⽹页中。
优点：

• 解决加载缓慢的第三⽅内容如图标和⼴告等的加载问题
• Security sandbox
• 并⾏加载脚本
• ⽅便制作导航栏

缺点：

• iframe 会阻塞主页⾯的 Onload 事件
• 即使内容为空，加载也需要时间
• 没有语意

40、请说出 vue.cli 项⽬中 src ⽬录每个⽂件夹和⽂件的⽤法？

assets ⽂件夹是放静态资源；components 是放组件；router 是定义路由相关的配置; view 视图；app.vue 是⼀个应⽤主组件；main.js 是⼊⼝⽂件

41、vue 常⽤的修饰符

• .stop: 等统⼀ JavaScript 中的 event.stopPropagation(), 防⽌事件冒泡
• .prevent: 等同于 JavaScript 中的 event。preventDefault(), 防⽌执⾏预设的⾏为 (如果事件可取消，则取消该事件，⽽不停⽌事件的进⼀步
• capture: 与事件冒泡的⽅向相反，事件捕获由外到内
• self: 只会触发⾃⼰范围内的事件，不包含⼦元素；
• once: 只会触发⼀次。

42、⾃定义指令（v-check、v-focus）的⽅法有哪些？它有哪些钩⼦函数？还有哪些钩⼦函数参数？

• 全局定义指令：在 vue 对象的 directive ⽅法⾥⾯有两个参数，⼀个是指令名称，另外⼀个是函数。组件内定义指令：directives
• 钩⼦函数：bind（绑定事件触发）、inserted(节点插⼊的时候触发)、update（组件内相关更新）
• 钩⼦函数参数：el、binding

43、vue 的两个核⼼点

数据驱动，组件系统

• 数据驱动：ViewModel，保证数据和视图的⼀致性
• 组件系统：应⽤类 UI 可以看做全部是由组件树构成的

44、delete 和 Vue.delete 删除数组的区别

• delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
• Vue.delete 直接删除了数组 改变了数组的键值

45、Vue-router 跳转和 location.href 有什么区别

使⽤ location.href=/url 来跳转，简单⽅便，但是刷新了页⾯；使⽤ history.pushState(/url), ⽆刷新页⾯，静态跳转；引进 router，然后使⽤ router.push(/url) 来跳转，使⽤了 diff 算法，实现了按需加载，减少了 dom 的消耗。其实使⽤ router 跳转和使⽤ history.pushState() 没什么差别，因为 vue-router 就是⽤了 history.pushState(), 尤其是在 history 模式下。

46、RouterLink 在 IE 和 Firefox 中不起作⽤（路由不跳转）的问题

⽅法⼀
只⽤ a 标签，不使⽤ button 标签
⽅法⼆
使⽤ button 标签和 Router.navigate ⽅法

47、请说下封装 vue 组件的过程？

⾸先，组件可以提升整个项⽬的开发效率。能够把页⾯抽象成多个相对独⽴的模块，解决了我们传统项⽬开发：效率低、难维护、复⽤性等问题。

然后，使⽤ Vue.extend ⽅法创建⼀个组件，然后使⽤ Vue.component ⽅法注册组件。⼦组件需要数据，可以在 props 中接受定义。⽽⼦组件修改好数据后，想把数据传递给⽗组件。可以采⽤ emit ⽅法。

48、params 和 query 的区别

⽤法：query 要⽤ path 来引⼊，params 要⽤ name 来引⼊，接收参数都是类似的，分别是 this.

r

o

u

t

e

r

.

q

u

e

r

y

.

n

a

m

e

和

t

h

i

s

.

router.query.name 和 this.

router.query.name和this.router.params.name。url 地址显⽰：query 更加类似于我们 ajax 中 get 传参，params 则类似于 post，说的再简单⼀点，前者在浏览器地址栏中显⽰参数，后者则不显⽰

注意点：query 刷新不会丢失 query ⾥⾯的数据 params 刷新会丢失 params ⾥⾯的数据

49、vue mock 数据

在项⽬中尝试了 mockjs，mock 数据，实现前后端分离开发。关于 mockjs，官⽹描述的是

• 1. 前后端分离
• 2. 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
• 3. 数据类型丰富
• 4. 通过随机数据，模拟各种场景。

总结：在后端接⼝没有开发完成之前，前端可以⽤已有的接⼝⽂档，在真实的请求上拦截 ajax，并根据 mockjs 的 mock 数据的规则，模拟真实接⼝返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。

与以往的⾃⼰模拟的假数据不同，mockjs 可以带给我们的是：在后台接⼝未开发完成之前模拟数据，并返回，完成前台的交互；在后台数据完成之后，你所做的只是去掉 mockjs：停⽌拦截真实的 ajax，仅此⽽已。

50、vue 初始化页⾯闪动问题

使⽤ vue 开发时，在 vue 初始化之前，由于 div 是不会 vue 管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于 {{message}} 的字样，虽然⼀般情况下这个时间很短暂，但是我们还是有必要解决这个问题的。

⾸先：在 css ⾥加上 [v-cloak]{display:none;}，如果没有彻底解决问题，则在根元素加上 style=“display:none;” :style=“{display:block}”

51、vue 更新数组时触发视图更新的⽅法

push();pop();shift();unshift();splice();sort();reverse()

52、vue 常⽤的 UI 组件库

Mint UI，element，VUX

53、mint-ui 是什么？怎么使⽤？说出⾄少三个组件使⽤⽅法？

基于 vue 的前端组件库。npm 安装，然后 import 样式和 js，vue.use（mintUi）全局引⼊。在单个组件局部引⼊：import {Toast} from ‘mint-ui’。

• 组件⼀：Toast(‘登录成功’)；
• 组件⼆：mint-header；
• 组件三：mint-swiper

54、Vue ⾥⾯ router-link 在电脑上有⽤，在安卓上没反应怎么解决？

Vue 路由在 Android 机上有问题，babel 问题，安装 babel polypill 插件解决

55、Vue2 中注册在 router-link 上事件⽆效解决⽅法

使⽤ @click.native。原因：router-link 会阻⽌ click 事件，.native 指直接监听⼀个原⽣事件。

56、简述 MVVM 框架

Model: 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。

View: 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。

ViewModel: 监听数据模型的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View。

57、vue2 和 vue3 区别

1. 写法上的区别: vue2 使用的是options(选项)Api,vue3 的是composition Api(当然 vue3 也兼容composition api)。options Api中methods，compute，data等 api 都是分散的。而composition api中的代码是根据逻辑功能来组织的, 我们可以将一个功能所定义的methods，compute，data等 api 会放在一起, 让我们可以更灵活地组合组件逻辑。
2. vue2 将响应式数据放到 data 函数中, 而 vue3 则是使用ref和reactive将数据声明为响应式
3. 响应式实现方式: vue2 中是通过Object.defineProperty对数据劫持实现的, vue3 中则是使用Proxy对数据代理实现的。
4. 生命周期区别: vue3 中将beforeCreate和created合并到了setup函数中
5. 根节点: vue3 组件允许多个根节点, 而 vue2 只允许一个
6. 内置组件: vue3 新增了传送组件Teleport和异步依赖处理组件Suspense

58、v-if 和 v-show

1. v-if表示一个 dom 元素是否被创建，而v-show则是控制这个 dom 元素的display属性是否为none
2. 一般在频繁切换状态的地方使用v-show,v-if则更适合条件不经常改变的场景，因为它切换开销相对较大

59、v-for 和 v-if 优先级

1. 开发过程中一般不建议同时将 v-for 和 v-if 放在一个标签中使用
2. Vue2 中 v-for 的优先级会更高，所以会先执行循环，再进行 v-if 判断，所以这样就会导致无论需不需展示这个元素，都会先遍历整个列表
3. 在 Vue3 中 v-if 的优先级会更高，但是当我们遍历一个数组的时候，根据数组中的某个元素进行 v-if 判断的时候就会报错，因为 v-if 会先执行此时还没有拿到这个数组。所以 Vue3 中会报错

60、介绍 Vue 插槽用法

插槽slot可以理解为占坑，当使用一个组件的时候，在组件标签里的对应的内容就会替换掉这个组件中的slot标签。

插槽分为默认插槽，具名插槽，作用域插槽。

默认插槽子组件中用slot标签来确定渲染位置，父组件使用它时直接在子组件的标签内写入内容即可

//子组件

//父组件

默认插槽

具名插槽

顾名思义就是具有名字的插槽，子组件中可以用name熟悉对slot命名，父组件在使用的时候通过template中的v-slot:name或者#name来定义这个插槽中的内容

//子组件

//父组件

具名插槽内容

作用域插槽

子组件中的slot可以通过类似组件属性传递的方式将子组件的值传递给父组件中这个子组件的插槽内容中（子组件标签内），在父组件使用子组件的时候要用v-slot的值进行接收这些参数，默认插槽可以将其直接写在子组件标签上，具名插槽则写在template上。而传过来的值只能在子组件标签中或者template标签中使用。所以在父组件作用域中获取到了子组件作用域中的变量，可以认为作用域插槽延伸了子组件数据的作用范围，因此叫做作用域插槽

61、过滤器的作用，如何实现一个过滤器

过滤器是用来过滤数据的，在 Vue 中使用 filters 来过滤数据，filters 不会修改数据，而是过滤数据，改变用户看到的输出

使用场景：

• 需要格式化数据的情况，比如需要处理时间、价格等数据格式的输出 / 显示。
• 比如后端返回一个 年月日的日期字符串，前端需要展示为 多少天前 的数据格式，此时就可以用 fliters 过滤器来处理数据。

过滤器是一个函数，它会把表达式中的值始终当作函数的第一个参数。过滤器用在插值表达式 {{}} 和 v-bind 表达式 中，然后放在操作符 “ | ” 后面进行指示

• 商品价格：{{item.price | filterPrice}}

• filters: { filterPrice (price) { return price ? (‘￥’ + price) : ‘–’ } }

  注意 vue3 已经移除了过滤器

  62、常见的事件修饰符及其作用

  • .stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡；
  • .prevent ：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
  • .capture ：将事件改成捕获模式, 由外到内触发
  • .self ：只会触发自己范围内的事件，不包含子元素；
  • .once ：只会触发一次。

  63、v-model 如何实现的

  v-model 其实是一个语法糖, 比如

  等同于

  63、Vue2 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？

  Vue2 中对象添加新属性绑定的视图不会更新, 因为 Vue2 中 Object.defineProperty 劫持不到 data 对象中新增的属性, 可以使用this.$set(this.obj, 'b', 'obj.b')解决

  $set() 方法相当于手动的去把 obj.b 处理成一个响应式的属性，此时视图也会跟着改变了。

  64、Vue 插件用法

  面试一般会问你如何写一个 vue 插件, 所以没写过 vue 插件的最好去亲自体验一下

  回答:

  vue实例会有一个use函数, 它接受的是一个带有install函数的对象和一个可选的选项对象, 当我们使用 vue.use(plugin)或者app.use(plugin)会调用我们插件的install属性的函数, 并且将当前组件的实例传进来. 所以在插件中就可以对这个实例进行一些操作来实现我们插件的功能

  65、Vue 自定义指令

  vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。面试经常会问什么是自定义指令? 你用自定义指令做过哪些功能?

  回答 1: 什么是自定义指令?

  1. 自定义指令包含局部指令和全局指令, 在模板中使用指令前必须先使用directives选项注册。局部指令指在某个组件中注册, 而全局则是将指令注册到全局, 通常在 main.js 中注册。
  2. 自定义指令由一个包含类似组件生命周期钩子的对象来定义。它的生命周期钩子包含created,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted,
  3. 常用的钩子为mounted 和 updated, 它接受el,binding等参数.binding参数的值一般包含绑定到这个元素上的信息, 比如下面这个指令

  它的 binding 会是这个对象

  {
  arg: ‘foo’,
  modifiers: { bar: true },
  value: /* baz 的值 /,
  oldValue: / 上一次更新时 baz 的值 */
  }

  ---

  回答 2: 你用自定义指令做过哪些功能?

  1. 数据埋点, 通过绑定自定义事件传入点击当前元素需要埋点的事件名, 在指令中监听当前元素的点击事件后调用后台接口将事件名传入
  2. 权限控制, 通过绑定自定义事件传入控制当前元素的权限字段, 在指令中获取到当前元素根据权限字段来控制该元素的状态 (显示, 隐藏等)

  66、computed 和 watch

  1. computed 是计算属性, 依赖其它属性值, 用于解决模板中放入过多的逻辑会让模板过重且难以维护的问题.watch 是侦听器, 当我们需要根据一个属性的变化而做出一些处理的时候, 可以使用 watch 来对这个属性进行监听
  2. computed 具有缓存的特点, 即当它所依赖的属性发生改变的时候它才会重新执行内部逻辑. 如下代码
  {{ addSum }}
  {{ addSum }}
  {{ addSum }}

  页面多次使用addSum, 但是只会打印一次 “内部逻辑执行”

  1. watch 在页面首次加载的时候默认不会执行, 需要设置immediate:true首次才会执行监听
  2. watch 默认只监听一层数据, 不监听多层数据里属性的变化, 需要设置deep:true才会进行深度监听

  67、vue 生命周期

  Vue2(选项式 API)	Vue3(setup)	描述
  beforeCreate	-	实例创建前
  created	-	实例创建后
  beforeMount	onBeforeMount	DOM 挂载前调用
  mounted	onMounted	DOM 挂载完成调用
  beforeUpdate	onBeforeUpdate	数据更新之前被调用
  updated	onUpdated	数据更新之后被调用
  beforeDestroy	onBeforeUnmount	组件销毁前调用
  destroyed	onUnmounted	组件销毁完成调用

  68、vue 父子组件生命周期执行顺序

  这个相对于上一个问题稍微复杂一点, 可以试着理解记忆或者直接记住吧

  渲染过程

  #mermaid-svg-czhhfdPqQmB0CYtp {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .error-icon{fill:#552222;}#mermaid-svg-czhhfdPqQmB0CYtp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-czhhfdPqQmB0CYtp .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-czhhfdPqQmB0CYtp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-czhhfdPqQmB0CYtp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-czhhfdPqQmB0CYtp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-czhhfdPqQmB0CYtp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-czhhfdPqQmB0CYtp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-czhhfdPqQmB0CYtp .marker.cross{stroke:#333333;}#mermaid-svg-czhhfdPqQmB0CYtp svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-czhhfdPqQmB0CYtp .label{font-family:“trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .cluster-label text{fill:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .cluster-label span{color:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .label text,#mermaid-svg-czhhfdPqQmB0CYtp span{fill:#333;color:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .node rect,#mermaid-svg-czhhfdPqQmB0CYtp .node circle,#mermaid-svg-czhhfdPqQmB0CYtp .node ellipse,#mermaid-svg-czhhfdPqQmB0CYtp .node polygon,#mermaid-svg-czhhfdPqQmB0CYtp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-czhhfdPqQmB0CYtp .node .label{text-align:center;}#mermaid-svg-czhhfdPqQmB0CYtp .node.clickable{cursor:pointer;}#mermaid-svg-czhhfdPqQmB0CYtp .arrowheadPath{fill:#333333;}#mermaid-svg-czhhfdPqQmB0CYtp .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-czhhfdPqQmB0CYtp .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-czhhfdPqQmB0CYtp .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-czhhfdPqQmB0CYtp .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-czhhfdPqQmB0CYtp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-czhhfdPqQmB0CYtp .cluster text{fill:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .cluster span{color:#333;}#mermaid-svg-czhhfdPqQmB0CYtp div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-czhhfdPqQmB0CYtp :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;}

  父beforeCreate

  父created

  父beforeMount

  子beforeCreate

  子created

  子beforeMount

  子mounted

  父mounted

  最后更多分享：前端字节跳动真题解析

  • 

  网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

  需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
  

  一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

  sl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-czhhfdPqQmB0CYtp :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;}

  父beforeCreate

  父created

  父beforeMount

  子beforeCreate

  子created

  子beforeMount

  子mounted

  父mounted

  最后更多分享：前端字节跳动真题解析

  • [外链图片转存中…(img-MPCeBOtU-1713627017065)]

  网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

  需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
  [外链图片转存中…(img-YTDteMtI-1713627017065)]

  一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！