前端面试重点
文章目录
- 前端面试重点
- 一.computed计算属性和watch区别以及各自使用途径
- 二.说说对SPA单页面的理解,及他的优缺点
- 三.如何优化首屏加载
- 四.项目如何优化性能
- 五.v-for为什么为什么要加key
- 六.如何解决v-for比v-if优先级高的问题
- 七.如何区分v-if和v-show
- 八.路由懒加载有几种方式
- 九.如何理解vue的单向数据流
- 十.vue的生命周期
- 十一.在哪个生命周期内调用异步操作
- 十二.在什么阶段才能访问操作DOM
- 十三.组件中data为什么是一个函数
- 十四.Vue中组件通信有几种方式
- 十五.什么是Vuex
- 十六.Vue-router路由模式有几种
- 十七.什么是MVVM
- 十八.vue响应式原理
- 十九.Proxy与Object.defineProperty优劣对比
- 二十.路由的导航钩子
- 二十一.路由的传参方法
- 二十二.路由的跳转方法
- 二十三.虚拟DOM的优缺点
- 二十四.Vue的常用指令有哪些
- 二十五.router和route的区别
- 二十六.localStorage、sessionStorage、Cookie的区别及用法
- 二十七.v-model的实现原理
- 总结
一.computed计算属性和watch区别以及各自使用途径
- 区别:
1.computed是计算属性;watch是监听属性
2.computed函数具有缓存,依赖的属性值发生改变,下一次获取computed值的时候才会重新计算;watch每次监听的值发生改变都会执行回调
3.computed必须有return;watch可以没有
- 使用场景:
1.computed是一个属性受多个属性影响;watch是多个属性受一个属性影响
2.computed不支持异步;watch支持异步
二.说说对SPA单页面的理解,及他的优缺点
-
它将所有的活动局限于一个 Web 页面中
-
优点:
1.用户体验好,内容加载快,不需要重新加载整个页面,避免不必要的跳转和重复渲染
2.服务器压力小
- 缺点:
1.初次加载慢
2.一个页面展示所有内容,没有浏览器的前进和后退功能
3.SEO难度大(搜索引擎)
三.如何优化首屏加载
主要为提高用户体验感
1.代码压缩
2,路由懒加载,对app.js进行code splitting
3.在index.js中使用CDN引入,并在webpack配置
4.增加带宽
5.提取第三方库vendor
四.项目如何优化性能
- 代码层面
1.v-for遍历为item添加key
就地复用策略
2.v-for遍历避免同时使用v-if
v-for比v-if优先级高,v-if会重复运行于每个v-for循环中
3.区分使用v-if和v-show的使用场景
4.区分computed和watch的使用场景
5.使用keep-alive
使用在路由中,为了缓存页面,防止页面在反复切换中重复渲染
6.图片资源懒加载,精灵图
7.路由懒加载
8.第三方库的引入(饿了么)
五.v-for为什么为什么要加key
- 根据v-for的就地复用策略,给他增加一个唯一的标识key,以便虚拟DOM更新的时候准确找到该节点,减少bug
六.如何解决v-for比v-if优先级高的问题
1.用computed替换v-if
2.将v-if置于外层
七.如何区分v-if和v-show
-
v-if是对Dom节点的销毁和创建
-
v-show通过css进行显示和隐藏
八.路由懒加载有几种方式
链接:link
1.import
2.require
九.如何理解vue的单向数据流
- 父组件向子组件传递参数,子组件不能直接更改父组件的数据
可以在子组件的data中创建一个变量来接收父组件传来的值进行更改;
还可以使用$emit自定义事件使父组件进行更改
十.vue的生命周期
1.beforeCreate 创建前
Created 创建后
2.beforeMounte 挂载前
Mounted 挂载后
3.beforeUpdate 更新前
update 更新后
4.beforeDestory 销毁前
Destoryed 销毁后
十一.在哪个生命周期内调用异步操作
- 在created beforeMounte Mounted中,因为这三个钩子中data已经创建
十二.在什么阶段才能访问操作DOM
- mounted DOM已经完成挂载
十三.组件中data为什么是一个函数
组件是用来复用的,js里对象是引用关系,如果组件中data是一个对象,这样作用域没有隔离,子组件的data属性会相互影响。
如果组件中data是一个函数,那么每一个实例可以维护一份被对象返回的独立的拷贝,组件实例中的data属性值不会相互影响;
new Vue的实例不会被复用,所以不存在引用对象的问题
十四.Vue中组件通信有几种方式
1.props:父子组件通信
$emit:子父组件通信
2.ref:普通DOM元素上指的是找到这个DOM元素;用在父组件上的子组件标签上就是指向子组件实例
3. p a r e n t / parent/ parent/children:适用父子之间通信
4.EventBus:兄弟
5.Vuex
十五.什么是Vuex
- Vuex是为Vue.js应用程序开发的状态管理库
它主要包括五个模块
1.State:应用状态的数据结构,这里设置默认的初始状态
2.Getter:State的计算属性
3.Mutation:唯一更改Store中状态的方法,必须是同步函数
4.Action:用于提交mutation,而不是直接更改状态,为异步操作
5.module:模块化
十六.Vue-router路由模式有几种
1.hash:使用URL hash 值作为路由;hash自带“#”
2.history:依赖H5提供的History
十七.什么是MVVM
MVVM 是 Model,View,ViewModel 的缩写。
Model 是数据层,用于存储数据和对数据进行增删改查。
View 是视图层,也就是UI界面,用于将数据模型转化成UI展现出来
ViewModel 是一个同步 View 和 Model 的对象。
在MVVM架构下,View 和 Model没有直接的联系,而是通过 ViewModel 进行交互,
Model 和 View 之间的交互是双向的,因此 View 的把变化会同步到 Model中,而Model 数据的变化也反应到 View 上。
十八.vue响应式原理
- 双向数据绑定主要是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持,在数据发生变化时发布消息给订阅者,触发相应的监听回调。
十九.Proxy与Object.defineProperty优劣对比
- Proxy:
1.可以直接监听对象而非属性
2.可以直接监听数组的变化
3.有13种拦截方法
4.返回一个新的对象,可以只操作新对象
- Object.definePropery
1.兼容性好
二十.路由的导航钩子
1.全局钩子:beforeEach(路由守卫)router.beforeEach(to,from,next)
2.局部钩子:beforeEnter
3.组件钩子:beforeRouteEnter
二十一.路由的传参方法
1.params:显示参数
把参数拼接在跳转路径后面,通过this.$route.params.参数名称获取
2.params:不显示参数
跳转时增加一个params参数,通过this.$route.params.参数名称获取
query:显示参数
跳转时增加一个params参数,通过this.$route.query.参数名称获取
二十二.路由的跳转方法
1.router-link
2.this.$router.push()
3.this.$router.replace
4.this.$router.go(n)
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
二十三.虚拟DOM的优缺点
- 什么是虚拟DOM
是用js模拟出的一颗DOM树,当你要进行变更的时候,虚拟DOM使用Diff算法进行新旧虚拟DOM比对,将变更放入到变更队伍中,反映给实际DOM,减少了DOM操作
- 优点:
不需要真实操作DOM,提高性能,节省开支
1.保证性能下限
2.无需动手操作
3.跨平台
- 缺点:首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢
二十四.Vue的常用指令有哪些
v-model、v-bind、v-show、v-for、v-if、v-else、v-hv-text
二十五.router和route的区别
1.$route
表示当前路由信息
2.$router
全局路由的实例
二十六.localStorage、sessionStorage、Cookie的区别及用法
- localStorage
1.生命周期是永久(这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。)
2.存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存。
3.不参与和服务器的通信。适用于常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。
- sessionStorage
1.仅在当前会话下有效,关闭页面或浏览器后被清除。
2.存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存。
3.不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。适用于敏感账号一次性登录。
- cookie
1.是以文本的方式保存在客户端,生命期为只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
2. 存放数据大小为4K左右 。有个数限制(各浏览器不同),一般不能超过20个。
3. 与服务器端通信:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题。但Cookie需要程序员自己封装,源生的Cookie接口不友好
- localStorage、sessionStorage、Cookie共同点:都是保存在浏览器端,且同源的。
二十七.v-model的实现原理
总结
祝我找到管饭的公司