Web前端最全Vue2 必备的50个知识点(1)，2024年最新字节面试官不开摄像头

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

相同点：

• 都是单向数据流

• 都使用了虚拟DOM的技术

• 都支持SSR

• 组件化开发

不同点：

• 前者template，后者JSX

• 数据改变，前者响应式，后者手动setState

• React单向绑定，Vue双向绑定

• React状态管理工具Redux、Mobx，Vue状态管理工具Vuex

4、MVVM是什么？和MVC有何区别呢？

MVC

• Model：负责从数据库中取数据

• View：负责展示数据

• Controller：用户交互的地方，例如点击事件

• 思想：Controller将Model的数据展示在View上

MVVM

• VM：就是View-Model，数据双向绑定

• Model：取数据的地方

• View：展示数据的地方

• 思想：View和Model实现数据同步，不需要手动更新

注意：Vue不严格符合MVVM，因为MVVM规定Model和View不能直接通信，而Vue可以使用ref进行通信

5、Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？

• JQuery直接操作DOM，而Vue不直接操作DOM，而是只需操作数据

• Vue的虚拟DOM技术，能适配多端

• Vue集成了一些库，大大提高开发效率，例如Route、Vuex等等

6、为什么data是个函数并且返回一个对象呢？

防止组件被多个页面使用时，造成的变量互相污染

7、使用过哪些Vue的修饰符呢？

• .lazy：输入框失焦时才会更新v-model的值

• .trim：讲v-model绑定的值首位空格给去掉

• .number：将v-medol绑定的值转数字

• .stop：阻止事件冒泡

• .capture：事件的捕获

• .self：点击事件绑定本身才触发

• .once：事件只触发一次

• .prevent：阻止默认事件

• .native：绑定事件在自定义组件上时，确保能执行

• .left、.middle、.right：鼠标左中右键的触发

• passive：相当于给移动端滚动事件加一个.lazy

• camel：确保变量名会被识别成驼峰命名

• .sync：简化子修改父值的步骤

8、路由的几种模式？

• hash：哈希模式，根据hash值的更改进行组件切换，而不刷新页面

• history：历史模式，依赖于HTML5的pushState和replaceState

• abstract：适用于Node

9、路由的钩子函数？

全局钩子

• beforeEach：跳转路由前

• to：将要跳转进入的路由对象

• from：将要离开的路由对象

• next：执行跳转的方法

• afterEach：路由跳转后

• to：将要跳转进入的路由对象

路由独享钩子

routes: [

{

path: ‘/xxx’,

component: xxx,

beforeEnter: (to, from, next) => {

}

}

]

组件内路由钩子

• beforeRouteEnter(to, from, next)：跳转路由渲染组件时触发

• beforeRouteUpdate(to, from, next)：跳转路由且组件被复用时触发

• beforeRouteLeave(to, from, next)：跳转路由且离开组件时触发

10、使用过哪些Vue的内部指令呢？

• v-text：元素的textContent

• v-html：元素的innerHTML

• v-show：通过样式display改变显隐

• v-if：通过操作DOM改变显隐

• v-else：配合v-if

• v-else-id：配合v-else

• v-for：循环渲染

• v-on：绑定事件，缩写@

• v-bind：绑定变量，缩写:

• v-model：双向绑定

• v-slot：插槽

• v-once：只渲染一次

• v-pre：跳过元素编译

• v-cloak：隐藏双括号，有值再显示

11、组件之间的传值方式有哪些？

• 父传子，子组件通过props接收

• 子传父，子组件使用$emit对父组件进行传值

• 父子之间通过$parent和$chidren获取实例进而通信

• 通过vuex进行状态管理

• 通过eventBus进行跨组件值传递

• provide和inject，官方不建议使用

• $ref获取实例，进而传值

• 路由传值

• localStorage、sessionStorage

12、如何设置动态class，动态style？

• 动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div>

• 动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div>

• 动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div>

• 动态style数组：`

13、v-if和v-show有何区别？

• v-if：通过操作DOM来控制显隐，适用于偶尔显隐的情况

• v-show：通过改变样式display属性控制显隐，适用于频繁显隐的情况

14、computed和watch有何区别？

• computed：依赖多个变量计算出一个变量，且具有缓存机制，依赖值不变的情况下，会复用计算值。computed中不能进行异步操作

• watch：通常监听一个变量的变化，而去做一些事，可异步操作

• 简单记就是：一般情况下computed的多对一，watch一对多

15、Vue的生命周期？

• beforeCreate：实例Vue，未初始化和响应式数据

• created：已初始化和响应式数据，可访问数据

• beforeMount：render调用，虚拟DOM生成，未转真实DOM

• mounted：真实DOM挂载完成

• beforeUpdate：数据更新，新虚拟DOM生成

• updated：新旧虚拟DOM进行对比，打补丁，然后进行真实DOM更新

• beforeDestroy：实例销毁前，仍可访问数据

• destroy：实例销毁，子实例销毁，指令解绑，解绑本实例的事件

• activated：keep-alive所缓存组件激活时调用

• deactivated：keep-alive所缓存组件停用时调用

• errorCaptured：子孙组件的错误捕获，此函数可返回false阻止继续向上传播

16、为什么v-if和v-for不建议用在同一标签？

v-for优先级高于v-if，每项都通过v-for渲染出来后再去通过v-if判断显隐

17、 vuex的有哪些属性？用处是什么？

• state：定义初始状态

• getter：从store从取数据

• mutation：更改store中状态，只能同步操作

• action：用于提交mutation，而不直接更改状态，可异步操作

• module：store的模块拆分

18、不需要响应式的数据应该怎么处理？

• 定义在data的return之外

• 使用Object.freeze进行数据冻结

19、watch有哪些属性，分别有什么用？

• immediate：初次加载时立即执行

• deep：是否进行深度监听

• handler：监听的回调函数

20、父子组件生命周期顺序？

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

21、对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？

• 原因：Object.defineProperty没有对对象的新属性进行劫持

• 解决：

• 新增属性：Vue.set(target, key, value)

• 删除属性：Vue.delete(target, key)

22、直接arr[index] = xxx无法更新视图怎么办？为什么？怎么办？

• 原因：Vue出于性能考虑没有对数组下标进行劫持，而是通过改写数组原型方法

• 解决：

• splice：arr.splice(index, 1, value)

• Vue.set(target, index, value)

23、插槽的使用以及原理？

普通插槽 普通插槽slot会被当做子元素进行解析，最终会被解析成一个_t函数，他接收的第一个参数为插槽的名称，默认是default，也就是_t('default')，执行此函数进行最终元素的渲染，如果是具名插槽，则传对应的插槽名 作用域插槽 插槽会被封装成一个函数放置在scopeSlotes对象中，解析时_t第二个参数接收子组件的数据，并进行渲染

24、为什么不建议用index做key，为什么不建议用随机数做key？

{{item.name}}

list: [

{ name: ‘阿敏’, id: ‘123’ },

{ name: ‘阿红’, id: ‘124’ },

{ name: ‘阿花’, id: ‘125’ }

]

渲染为

阿敏

阿红

阿花

现在我执行 list.unshift({ name: ‘阿林’, id: ‘122’ })

渲染为

阿林

阿敏

阿红

阿花

新旧对比

阿敏

  

阿林

阿红

  

阿敏

阿花

  

阿红

阿花

可以看出，如果用index做key的话，其实是更新了原有的三项，并新增了阿花，虽然达到了渲染目的，但是损耗性能

现在我们使用id来做key，渲染为

阿敏

阿红

阿花

现在我执行 list.unshift({ name: ‘阿林’, id: ‘122’ })，渲染为

阿林

阿敏

阿红

阿花

新旧对比

阿林

阿敏

  

阿敏

阿红

  

阿红

阿花

  

阿花

可以看出，原有的三项都不变，只是新增了阿林这个人，这才是最理想的结果

用index和用随机数都是同理，随机数每次都在变；

25、自定义指令的钩子函数？

这里只说Vue2的

• bind：指令绑定到指定元素时调用，只调用一次

• inserted：指定元素插入父节点时调用

• update：所在组件的 VNode 更新时调用

• componnetUpdated：所在组件以及其子组件 VNode 全部更新后调用

• unbind：只调用一次，指令与元素解绑时调用

26、说说nextTick的用处？

修改数据时不能马上得到最新的DOM信息，所以需要使用nextTick，在nectTick回调中可以获取最新DOM信息

27、为什么nextTick优先是微任务？

优先是Promise.then方法，是个微任务，这样可以避免多一次队列，进而少一次UI渲染，节省性能

28、Vue的SSR是什么？有什么好处？

SSR全称Server Side Render

• 有利于SEO：由于是在服务端，将数据填充进HTML之后再推送到浏览器，所以有利于SEO的爬取

• 首屏渲染快

29、Vue响应式是怎么实现的？

• 1、劫持：通过Object.defineProperty对对象进行递归劫持属性的get、set

• 2、观察者模式：使用watcher进行观察数据使用的地方

• 3、发布订阅模式：使用dep收集watcher，数据更改时，通过notify方法通知dep里的watcher去进行相应的更新

• 4、数组：数组没有使用劫持的模式，而是通过重写数组原型上的方法，来实现数组的响应式

30、为什么只对对象劫持，而要对数组进行方法重写？

数组的元素大概率是成百上千的，所以对数组下标进行劫持的话会非常消耗性能。Vue通过对数组原型上方法的重写，实现数组的响应式

31、Vue.set方法的原理？

Vue.set(target, key, value)

• 第一步：判断target是数组的话，则调用target.splice(key, 1, value)

• 第二步：判断target是对象的话，再判断传入的key是否已存在target中

• 是：直接target[key] = value

• 否：调用defineReactive(target, key, val)进行响应式处理

export default function set(target, key, val) {

if (Array.isArray(target)) {

target.length = Math.max(target.length, key)

target.splice(key, 1, val)

return val

}

const ob = target.ob

if (key in target && !(key in target.prototype) || !ob) {

target[key] = val

return val

}

defineReactive(target, key, val)

return val

}

32、Vue.delete方法的原理？

Vue.delete(target, key)

• 第一步：判断target是否为数组，是的话调用target.splice(key, 1)

• 第二步：判断target是对象的话，调用delete关键字删除属性，并调用__ob__.dep.notify进行更新通知

export default function del (target, key) {

if (Array.isArray(target)) {

target.splice(key, 1)

return

}

const ob = target.ob

if (!(key in target)) return

delete target[key]

if (!ob) return

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。