前端面试宝典

1 Vue生命周期总结(四个阶段,八个钩子函数)

vue生命周期分为四个阶段

第一阶段(创建阶段):beforeCreate,created

第二阶段(挂载阶段):beforeMount(render),mounted

第三阶段(更新阶段):beforeUpdate,updated

第四阶段(销毁阶段):beforeDestroy,destroyed

2 vue组件初始化的执行顺序

Props Watch 等顺序
beforeCreate ->inject -> Props -> Methods -> Data -> Computed -> Watch ->provide-> created

结合父子组件之后,一个完整的父子组件生命周期
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

参考:Vue------父子组件的生命周期(执行顺序)

3 Vue2和Vue3的区别

响应式原理不同(数据双向绑定原理)

vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现,Object.definedProperty()会遍历每一个属性。

vue3通过proxy代理的方式实现。

proxy的优势:不需要像Object.definedProperty()的那样遍历每一个属性,有一定的性能提升proxy可以理解为在目标对象之前架设一层"拦截",外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。

当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历,会自动监听所有属性,有利于性能的提升

在vue2中v-for的优先级高于v-if,可以放在一起使用,但是不建议这么做,会带来性能上的浪费在vue3中v-if的优先级高于v-for,一起使用会报错。可以通过在外部添加一个标签,将v-for移到外层

参考:Vue2和Vue3的区别

4 vue2数据双向绑定原理详细介绍

详细介绍:vue数据双向绑定原理

5 Computed和Watch的区别

1、computed是计算属性;watch是监听,监听data中的数据变化。

2、computed支持缓存,当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值;watch不支持缓存,当对应属性发生变化的时候,响应执行。

3、computed不支持异步,有异步操作时无法监听数据变化;watch支持异步操作。 4、computed第一次加载时就监听;watch默认第一次加载时不监听。

4、computed第一次加载时就监听;watch默认第一次加载时不监听。

5、computed中的函数必须调用return;watch不是。

6、使用场景:

computed:一个属性受到多个属性影响,如:购物车商品结算(多对一)。

watch:监听路由变化,一个数据影响多条数据,如:搜索数据(一对多)。

数据变化响应,执行异步操作,或高性能消耗的操作,watch为最佳选择。

详细介绍:computed和Watch的区别

6 Vuex有那几种状态和属性?

Vuex有那几种状态和属性详细介绍

7 vue路由守卫

vue路由守卫详细介绍

8 Vue项目优化方案

Vue项目优化方案详细介绍

9 es5和es6区别

1、变量声明方式不同:ES5使用var关键字进行变量声明,而ES6则引入了let和const关键字来声明变量。

2、块级作用域:在ES5中,只存在全局作用域和函数作用域,而ES6中增加了块级作用域,对于if、for、switch等代码块内部所声明的变量,在外部是不可见的。

3、箭头函数:ES6中新增了箭头函数,可以更为简洁地定义函数,同时箭头函数没有自己的this,它的this绑定在父级作用域的this上。

4、字符串模板:ES6中新增了字符串模板功能,可以使用反引号(`)来定义多行文本和嵌入表达式。

5、类和继承:ES6中引入了class关键字来实现类和继承,使得面向对象编程更加方便。

6、模块化:ES6中引入了模块化的概念,通过export和import关键字来实现模块的导出和引入。

7、解构赋值:ES6中引入了解构赋值语法,可以方便地从数组或对象中提取值并赋给变量。

8、Promise对象:ES6中引入了Promise对象,可以更加优雅地处理异步操作。

9、其他:ES6还新增了一些新的数据结构和方法,如Set、Map、Symbol等。同时对于函数参数的默认值、rest参数等也进行了增强和优化。

es5和es6区别详细介绍

10 前端跨域处理方案

一、JSONP跨域
  • jsonp的缺点:只能发送get一种请求。
二、跨域资源共享(CORS)

三、Nginx 反向代理解决跨域问题

四、nodejs中间件代理跨域

五、document.domain + iframe跨域

六、location.hash + iframe跨域

七、window.name + iframe解决跨域

八、postMessage通信跨域
  • postMessage:发送
  • onmessage:接收
九、WebSocket协议跨域

前端跨域处理方案详细介绍

相关推荐
工一木子10 分钟前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
Alfred king4 小时前
面试150 生命游戏
leetcode·游戏·面试·数组
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈