前端面试题
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.描述响应式原理
- 通过Object.defineProperty实现监听数据的改变和读取(getter和setter)
- 观察者模式(发布者-订阅者)
- 当数据发生改变通过 发布者订阅者模式来进行通知
- 和组件的渲染和更新过程类似
13.diff算法
首先了解一下这个,diff算法是vue的核心算法,概念:
diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。
说简单点就是新旧节点一一比较,然后给真实DOM打补丁
我们都知道网页渲染的过程是一棵树生成的过程,当页面更新时,就会把新旧两棵树按照同层级比较,不会跨级比较,当发现有节点改变时,仅仅改变此节点在真实DOM上从而实现局部刷新,
vue的diff算法的比较规则:新旧列表的两端对比
1.使用旧列表的头一个节点oldStartNode与新列表的头一个节点newStartNode对比
2.使用旧列表的最后一个节点oldEndNode与新列表的最后一个节点newEndNode对比
3.使用旧列表的头一个节点oldStartNode与新列表的最后一个节点newEndNode对比
4.使用旧列表的最后一个节点oldEndNode与新列表的头一个节点newStartNode对比
5.当前四个比较规则都失效的时候,把新列表的第一个节点newStartNode对旧列表进行循环遍历对比
时间复杂度为O(n)