2024年Vue最常见的口试题以及答案（口试必过），2024年最新GitHub标星9K的G
3.当须要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才可以或许监听到变革，此时就须要deep属性对对象进行深度监听。watch: {
name: {
handler(newName, oldName) {
},
deep: true,
immediate: true
}
}
vue中对mixins的明白和使用
================================================================================
mixins是一种分发 Vue 组件中可复用功能的非常机动的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
而mixins引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相称于在引入后，父组件的各种属性方法都被扩充了。
可点击vue中对mixins的明白和使用的先容作为参考
vue中的插槽
======================================================================
https://img-blog.csdnimg.cn/20210414140422584.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0,size_16,color_FFFFFF,t_70#pic_center
或者点击Vue中组件神兵利器，插槽Slot！检察详解！
为什么vue采用异步渲染
===========================================================================
vue是组件级更新，当前组件里的数据变了，它就会去更新这个组件。当数据更改一次组件就要重新渲染一次，性能不高，为了防止数据一更新就更新组件，以是做了个异步更新渲染。（核心的方法就是nextTick）
源码实现原理：
当数据变革后会调用notify方法，将watcher遍历，调用update方法关照watcher进行更新，这时候watcher并不会立刻去执行，在update中会调用queueWatcher方法将watcher放到了一个队列里，在queueWatcher会根据watcher的进行去重，多个属性依靠一个watcher，如果队列中没有该watcher就会将该watcher添加到队列中，然后通过nextTick异步执行flushSchedulerQueue方法刷新watcher队列。flushSchedulerQueue中开始会触发一个before的方法，着实就是beforeUpdate，然后watcher.run() 才开始真正执行watcher，执行完页面就渲染完成啦，更新完成后会调用updated钩子。
https://img-blog.csdnimg.cn/20210421111758144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0,size_16,color_FFFFFF,t_70
Vue 的异步更新机制是怎样实现的？
=================================================================================
Vue 的异步更新机制的核心是使用了浏览器的异步任务队列来实现的，首选微任务队列，宏任务队列次之。
当响应式数据更新后，会调用 dep.notify 方法，关照 dep 中网络的 watcher 去执行 update 方法，watcher.update 将 watcher 自己放入一个 watcher 队列（全局的 queue 数组）。
然后通过 nextTick 方法将一个刷新 watcher 队列的方法（flushSchedulerQueue）放入一个全局的 callbacks 数组中。
如果此时浏览器的异步任务队列中没有一个叫 flushCallbacks 的函数，则执行 timerFunc 函数，将 flushCallbacks 函数放入异步任务队列。如果异步任务队列中已经存在 flushCallbacks 函数，等待其执行完成以后再放入下一个 flushCallbacks 函数。
flushCallbacks 函数负责执行 callbacks 数组中的所有 flushSchedulerQueue 函数。
flushSchedulerQueue 函数负责刷新 watcher 队列，即执行 queue 数组中每一个 watcher 的 run 方法，从而进入更新阶段，好比执行组件更新函数或者执行用户 watch 的回调函数。
$nextTick的明白
===========================================================================
用法：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立刻使用这个方法，获取更新后的 DOM。
为什么？
Vue 实现响应式并不是数据发生变革之后 DOM 立刻变革，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变革，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于制止不须要的盘算和 DOM 操纵是非常紧张的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
以是为了在数据变革之后等待 Vue 完成更新 DOM，可以在数据变革之后立刻使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
使用场景
在你更新完数据后，须要及时操纵渲染好的 DOM时
Vue中常用的一些指令
==========================================================================
1.v-model指令：用于表单输入，实现表单控件和数据的双向绑定。
2.v-on：简写为@，底子事件绑定
3.v-bind：简写为：，动态绑定一些元素的属性，类型可以是：字符串、对象或数组。
4.v-if指令：取值为true/false，控制元素是否须要被渲染
5.v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。
6.v-show指令：指令的取值为true/false，分别对应着表现/隐藏。
7.v-for指令：遍历data中存放的数组数据，实现列表的渲染。
8.v-once： 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
vue的自界说指令
========================================================================
Vue除了核心功能默认内置的指令 ，Vue 也允许注册自界说指令。
自界说指令是用来操纵DOM的。只管Vue推许数据驱动视图的理念，但并非所有情况都适合数据驱动。自界说指令就是一种有效的补充和扩展，不光可用于界说任何的DOM操纵，并且是可复用的。
添加自界说指令的两种方式：
[*] 全局指令： 通过 Vue.directive() 函数注册一个全局的指令。
[*] 局部指令：通过组件的 directives 属性，对该组件添加一个局部的指令。
可以参考怎样写一个Vue自界说指令或Vue.js官网关于自界说指令的详细讲解学习
你有写过自界说指令吗？自界说指令的应用场景有哪些？
========================================================================================
可以参考怎样写一个Vue自界说指令
v-show和v-if指令的共同点和不同点
====================================================================================
相同点：
v-show和v-if都能控制元素的表现和隐藏。
不同点：
1.实现本质方法不同:v-show本质就是通过设置css中的display设置为none;控制隐藏v-if是动态的向DOM树内添加或者删除DOM元素;
2.v-show都会编译，初始值为false，只是将display设为none，但它也编译了;v-if初始值为false，就不会编译了
总结：v-show只编译一次，后面着实就是控制css，而v-if不停的销毁和创建，如果要频繁切换某节点时，故v-show性能更好一点。
为什么制止v-if和v-for一起使用
==================================================================================
vue2.x版本中，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级；
vue3.x版本中，当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。
官网明白指出：制止 v-if 和 v-for 一起使用，永远不要在一个元素上同时使用 v-if 和 v-for。
可以先对数据在盘算数据中进行过滤，然后再进行遍历渲染；
操纵和实现起来都没有什么问题，页面也会正常展示。但是会带来不须要的性能斲丧；
vue为什么在 HTML 中监听事件？
==================================================================================
你可能注意到这种事件监听的方式违反了关注点分离 (separation of concern) 这个恒久以来的精良传统。但不必担心，由于所有的 Vue.js 事件处置惩罚方法和表达式都严酷绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 或 @ 有几个长处：
[*] 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
[*] 由于你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
[*] 当一个 ViewModel 被销毁时，所有的事件处置惩罚器都会自动被删除。你无须担心怎样清理它们。
Vue.set 改变数组和对象中的属性
==================================================================================
在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的,以是数据改变了但是不会在页面渲染；
解决办法：
使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
vm.$set(obj, key, val) 做了什么？
===========================================================================================
由于 Vue 无法探测对象新增属性或者通过索引为数组新增一个元素，以是这才有了 vm. s e t ， 它 是 V u e . s e t 的 别 名 。 v m . set，它是 Vue.set 的别名。 vm. set，它是Vue.set的别名。vm.set 用于向响应式对象添加一个新的 property，并确保这个新的 property 同样是响应式的，并触发视图更新。
[*] 为对象添加一个新的响应式数据：调用 defineReactive 方法为对象增加响应式数据，然后执行 dep.notify 进行依靠关照，更新视图
[*] 为数组添加一个新的响应式数据：通过 splice 方法实现
说说vue的生命周期的明白
============================================================================
生命周期通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
beforecreate （初始化界眼前）
created （初始化界面后）
beforemount （渲染界眼前）
mounted （渲染界面后）
beforeUpdate （更新数据前）
updated （更新数据后）
beforedestory （卸载组件前）
destroyed （卸载组件后）
注意：口试官想听到的不只是你说出了以上八个钩子名称，而是每个阶段做了什么？可以收藏下图！
https://img-blog.csdnimg.cn/20201215143217300.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0,size_16,color_FFFFFF,t_70#pic_center
第一次页面加载会触发哪几个钩子？
===============================================================================
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
Vue组件通信有哪些方式
===========================================================================
1.父传子：props
父组件通过 props 向下通报数据给子组件。注：组件中的数据共有三种情势：data、props、computed
2.父传子孙：provide 和 inject
父组件界说provide方法return须要分享给子孙组件的属性，子孙组件使用 inject 选项来接收指定的我们想要添加在这个实例上的 属性；
3.子传父：通过事件情势
子组件通过 $emit()给父组件发送消息，父组件通过v-on绑定事件接收数据。
4.父子、兄弟、跨级：eventBus.js
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心）,用它来（ e m i t ） 触 发 事 件 和 （ emit）触发事件和（ emit）触发事件和（on）监听事件，奇妙而轻量地实现了任何组件间的通信。
5.通信插件：PubSub.js
6.vuex
vuex 是 vue 的状态管理器，存储的数据是响应式的。只须要把共享的值放到vuex中，其他须要的组件直接获取使用即可；
router和route的区别
==============================================================================
router为VueRouter的实例，相称于一个全局的路由器对象，里面含有许多属性和子对象，比方history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。
route相称于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等
vue-router有几种钩子函数？
=================================================================================
1.全局路由
全局导航钩子主要有两种钩子：前置保卫(beforeEach)、后置钩子(afterEach)
2. 路由独享的钩子
单个路由独享的导航钩子，它是在路由配置上直接进行界说的
routes: [
{
path: ‘/file’,
component: File,
beforeEnter: (to, from ,next) => {
//do something
}
}
]
[*]组件内的导航钩子
组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行界说的。
ps:详细知识点可以点击路由导航保卫检察；
vue-router路由跳转方式
===============================================================================
声明式（标签跳转）
编程式（ js跳转）
this.$router.push(‘/home’)
this.$router.push({name:‘home’})
this.$router.push({path:‘/home’})
vue-router路由传参
=============================================================================
router-link 进行页面按钮式路由跳转传参
this.$router.push进行编程式路由跳转传参
keep-alive了解吗
============================================================================
< keep-alive >是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
< keep-alive > 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
Vuex是什么？怎么使用？
============================================================================
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便实现组件数据之间的共享；Vuex集中管理共享的数据，易于开发和后期维护；可以或许高效的实现组件之间的数据共享，提高开发效率；存储在Vuex的数据是响应式的，可以或许及时保持页面和数据的同步；
Vuex紧张核心属性包括：state,mutations,action,getters,modules.
state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations界说的方法动态修改Vuex 的 store 中的状态或数据。
action
actions可以明白为通过将mutations里面处里数据的方法变成可异步的处置惩罚数据的方法，简单的说就是异步操纵数据。view 层通过 store.dispath 来分发 action。
getters
类似vue的盘算属性，主要用来过滤一些数据。
modules
项目特殊复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得布局非常清晰，方便管理。
ps:详细使用和对其各属性的明白可以参考以下文章！
认识vuex和使用
核心概念State和Mutation的明白和使用
核心概念Action和Getter的明白和使用
什么情况下使用 Vuex？
============================================================================
如果应用够简单，最好不要使用 Vuex，一个简单的 store 模式即可；
须要构建一个中大型单页应用时，使用Vuex能更好地在组件外部管理状态；
Vuex和单纯的全局对象有什么区别？
=================================================================================
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变革，那么相应的组件也会相应地得到高效更新。
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变革，从而让我们可以或许实现一些工具帮助我们更好地了解我们的应用。
为什么 Vuex 的 mutation 中不能做异步操纵？
============================================================================================
每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操纵，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。
axios 是什么，其特点和常用语法
=================================================================================
是什么？
[*] Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。前端最盛行的 ajax 哀求库，
[*] react/vue 官方都推荐使用 axios 发 ajax 哀求
特点:
[*] 基于 promise 的异步 ajax 哀求库，支持promise所有的API
[*] 浏览器端/node 端都可以使用，浏览器中创建XMLHttpRequests
[*] 支持哀求／响应拦截器
[*] 支持哀求取消
[*] 可以转换哀求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
[*] 批量发送多个哀求
[*] 安全性更高，客户端支持防御 XSRF，就是让你的每个哀求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，背景就可以轻松辨别出这个哀求是否是用户在假冒网站上的误导输入，从而接纳精确的策略。
常用语法：
axios(config): 通用/最本质的发任意类型哀求的方式
axios(url[, config]): 可以只指定 url 发 get 哀求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get 哀求
axios.delete(url[, config]): 发 delete 哀求
axios.post(url[, data, config]): 发 post 哀求
axios.put(url[, data, config]): 发 put 哀求
axios.defaults.xxx: 哀求的默认全局配置
axios.interceptors.request.use(): 添加哀求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create(): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消哀求的错误对象
axios.CancelToken(): 用于创建取消哀求的 token 对象
axios.isCancel(): 是否是一个取消哀求的错误
axios.all(promises): 用于批量执行多个异步哀求
axios.spread(): 用来指定接收所有乐成数据的回调函数的方法
对SSR有了解吗，它主要解决什么问题？
==================================================================================
Server-Side Rendering 我们称其为SSR，意为服务端渲问鼎由服务侧完成页面的 HTML 布局拼接的页面处置惩罚技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程；
解决了以下两个问题：
[*] seo：搜索引擎优先爬取页面HTML布局，使用ssr时，服务端已经天生了和业务想关联的HTML，有利于seo
[*] 首屏呈现渲染：用户无需等待页面所有js加载完成就可以看到页面视图（压力来到了服务器，以是须要衡量哪些用服务端渲染，哪些交给客户端）
缺点
[*] 复杂度：整个项目的复杂度
[*] 性能会受到影响
[*] 服务器负载变大，相对于前后端分离务器只须要提供静态资源来说，服务器负载更大，以是要慎重使用
Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？
===========================================================================================
具体详解检察Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做
Vue项目前端开发环境哀求服务器接口跨域问题
=====================================================================================
对于vue-cli 2.x版本在config文件夹配置服务器代理；
对于vue-cli 3.x版本前端配置服务器代理在vue.config.js中设置服务器代理；如下图：
https://img-blog.csdnimg.cn/20210408142342944.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0,size_16,color_FFFFFF,t_70#pic_center
target对应的属性值为你预备向后端服务器发送哀求的主机+端口，寄义为：相称于把前端发送哀求的主机+端口自动替换成挂载的主机和端口，这样前后端的主机端口都逐一就不会存在跨域问题；
ws:表示WebSocket协议；
changeOrigin:true;表示是否改变原域名；这个一定要选择为true;
这样发送哀求的时候就不会出现跨域问题了。
做过哪些Vue的性能优化？
============================================================================
编码阶段
[*] 尽量减少data中的数据，data中的数据都会增加getter和setter，会网络对应的watcher
[*] v-if和v-for不能连用
[*] 如果须要使用v-for给每项元素绑定事件时使用事件代理
[*] SPA 页面采用keep-alive缓存组件
[*] 在更多的情况下，使用v-if替代v-show
[*] key包管唯一
[*] 使用路由懒加载、异步组件
[*] 防抖、节省
[*] 第三方模块按需导入
[*] 长列表滚动到可视区域动态加载
[*] 图片懒加载
SEO优化
[*]服务端渲染SSR
自我先容一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到如今。
深知大多数前端工程师，想要提升技能，往往是自己探索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易遇到天花板技术停滞不前！
因此网络整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是盼望可以或许帮助到想自学提升又不知道该从何学起的朋侪，同时减轻各人的负担。
https://img-blog.csdnimg.cn/img_convert/86414fc443018c5a780287587f3f97e7.jpeg
https://img-blog.csdnimg.cn/img_convert/01f6b36450657b5710375033a2570d42.png
https://img-blog.csdnimg.cn/img_convert/181d0c2c9b556665c8b9d711a44014f1.png
https://img-blog.csdnimg.cn/img_convert/144a02d3af847020e6354cff1ce618d5.png
https://img-blog.csdnimg.cn/img_convert/e6069b5b5796737dcc647e0c3962b6d9.png
https://img-blog.csdnimg.cn/img_convert/ca0e38d7459480db4b43fc5c4a2fca19.png
既有适合小白学习的零底子资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部门目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你以为这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
https://img-blog.csdnimg.cn/img_convert/29f0c6222be54976286c45f63a632fc3.png
总结
我在成长过程中也是一路摸爬滚打，没有任何人的辅导，以是走的很艰难。比方在大三的时候，如果有个学长可以阶段性的辅导一二，如果有已经工作的师兄可以告诉我工作上须要什么，我应该前面的三年可以缩短一半；后来去口试bat，失败了有5、6次，每次也不知道具体是什么缘故原由，都是靠口试回忆去推测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道口试记载是多么紧张，口试官可以从口试记载里看到你的成长，总是去口试，总是没有成长，就会被界说为缺乏潜力。
https://img-blog.csdnimg.cn/img_convert/391523167d6c44d85416f3e91cae8f14.webp?x-oss-process=image/format,png
https://img-blog.csdnimg.cn/img_convert/904df553a9744423cfd2f1dd5693e1db.webp?x-oss-process=image/format,png
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感爱好的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、口试辅导），让我们一起学习成长！
https://img-blog.csdnimg.cn/img_convert/25aba52853324d5b67cc3438b88c7f06.png
-1712674822949)]
[外链图片转存中…(img-OGWduhXj-1712674822949)]
既有适合小白学习的零底子资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部门目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你以为这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-sIrb2eEC-1712674822949)]
总结
我在成长过程中也是一路摸爬滚打，没有任何人的辅导，以是走的很艰难。比方在大三的时候，如果有个学长可以阶段性的辅导一二，如果有已经工作的师兄可以告诉我工作上须要什么，我应该前面的三年可以缩短一半；后来去口试bat，失败了有5、6次，每次也不知道具体是什么缘故原由，都是靠口试回忆去推测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道口试记载是多么紧张，口试官可以从口试记载里看到你的成长，总是去口试，总是没有成长，就会被界说为缺乏潜力。
[外链图片转存中…(img-oCMqYpG7-1712674822950)]
[外链图片转存中…(img-fHXL40uR-1712674822950)]
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感爱好的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、口试辅导），让我们一起学习成长！
[外链图片转存中…(img-xEDGwMCL-1712674822950)]
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]