vue面试题

v-show和v-if的区别

• v-show通过CSS display控制显示和隐藏
• v-if组件真正的渲染和销毁，而不是显示和隐藏
• 频繁切换显示状态就用v-show,否则用v-if

为何在v-for中用key

• 必须用key,且不能是index和random
• diff算法中通过tag 和key来判断，是否是sameNode
• 减少渲染次数，提升渲染性能

描述Vue组件生命周期（父子组件）

vue组件如何通信

• 父子组件props和this.$emit
• 自定义事件event.$noevent.$off event.$emit
• vuex

描述组件渲染和更新的过程

双向数据绑定v-model的实现原理

对mvvm的理解

computed有何特点

• 缓存，data不变不会重新计算
• 提高性能

为何组件data是一个函数

组件实例化共享数据（class）

ajax请求应该放在哪个生命周期

• mounted
• js是单线程，ajax异步获取数据
• 放在mounted之前没有用，只会让逻辑更混乱

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

• $props
• <User v-bind=’$props’>

自己实现v-model

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

mixin

何时使用异步组件

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

何时需要使用keep-alive

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

何时需要使用beforeDestory

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

什么是作用域插槽

vuex中action和mutation有何区别

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

Vue-router常用的路由模式

• hash默认
• H5 history(需要服务器支持)
• 两者比较

如何配置Vue-router异步加载

请用vnode描述一个DOM结构

监听data的核心API

• object.defineProperty
• 以及深度监听、监听数组
• 有何缺点

Vue如何监听数组变化

• object.defineProperty不能监听数组变化
• 重新定义原型，重写pop push等方法，实现监听
• proxy可以原生支持监听数组变化

请描述响应式原理

-监听data变化
组件渲染和更新的流程

diff算法的事件复杂度

• o（n)

简述diff算法过程

-patch(elem,vnode)和patch(vnode,newVnode)
patchVnode和addVnodes和removeVnodes
updataChildren(key的重要性)

vue为何是异步渲染，$nextTick何用

• 异步渲染（以及合并data修改），以提高渲染性能
• $nextTick在DOM更新完之后，触发回调

vue常见性能优化

合理使用v-show和v-if
合理使用computed
v-for时加key,以及避免和v-if同时使用
自定义事件、DOM事件及时销毁（内存泄漏）
合理使用异步组件
合理使用keep-alive
data层级不要太深
使用vue-loader在开发环境做模板编译（预编译）