前端面试题

前端面试题

1.如何将组件所有props传递给子组件

用v-bind=‘$props’

2.如何自己实现v-model

3.多个组件有相同的逻辑，如何抽离

1、使用mixin全局混入功能，可以给每个组件合并抽离出来的逻辑。但过于简单粗暴，应写相应的逻辑限制混入实际的作用范围，比如使用 if 判断某个组件是否包含某个数据，如果存在则执行混入的规则。

2、公共方法可以抽离成一个 util.js 文件单独保存，某个组件需要时再import…from/ require(‘…’)导入公共方法。

3.大量使用的公共方法可以直接定义在 Vue.prototype 上，在入口文件可以操作

4.何时要使用异步组件

• 加载大组件
• 路由异步加载

5.何时使用Keep-alive

• 缓存组件，不需要重复渲染
• 如多个静态tab页的切换
• 优化性能

6.何时需要使用beforeDestory

• 解绑自定义事件event.$off
• 清除定时器
• 解绑自定义的DOM事件，如window scroll

7.vuex的action和Mutation的区别

• action可以处理异步，mutation不能
• mutation做原子操作
• action整合多个mutation

8.vue-router常用的路由模式

• 默认hash
• H5 history
• 两者比较

9.请用vnode描述一个dom结构

这是一个例子，也就是用vnode解析dom来写出结构

10.监听data变化的核心API是什么

• Object.defineProperty
• 深度监听、监听数组

11.Vue如何监听数组变化

• Object.defineProperty不能监听数组变化
• 重新定义原型，重写Push,pop方法实现监听
• proxy原生支持监听数组变化

12.描述响应式原理

1. 通过Object.defineProperty实现监听数据的改变和读取（getter和setter)
2. 观察者模式(发布者-订阅者)
3. 当数据发生改变通过 发布者订阅者模式来进行通知
4. 和组件的渲染和更新过程类似

13.diff算法

​ 首先了解一下这个，diff算法是vue的核心算法，概念:

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。
1

​ 说简单点就是新旧节点一一比较，然后给真实DOM打补丁

​ 我们都知道网页渲染的过程是一棵树生成的过程，当页面更新时，就会把新旧两棵树按照同层级比较，不会跨级比较，当发现有节点改变时，仅仅改变此节点在真实DOM上从而实现局部刷新，

图片搬运自:

vue的diff算法的比较规则:新旧列表的两端对比
1.使用旧列表的头一个节点oldStartNode与新列表的头一个节点newStartNode对比
2.使用旧列表的最后一个节点oldEndNode与新列表的最后一个节点newEndNode对比
3.使用旧列表的头一个节点oldStartNode与新列表的最后一个节点newEndNode对比
4.使用旧列表的最后一个节点oldEndNode与新列表的头一个节点newStartNode对比
5.当前四个比较规则都失效的时候,把新列表的第一个节点newStartNode对旧列表进行循环遍历对比

时间复杂度为O(n)