前端面试重点

前端面试重点

---

---

一.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.$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的实现原理

总结

祝我找到管饭的公司