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 组件生命周期（父子组件）：
挂载阶段：beforeCreate；created；beforeMount；mounted；
更新阶段：beforeUpdate；updated
销毁阶段：beforeDestroy；destroyed
created：实例初始化，页面还没有真正的渲染；mounted：渲染完成；
生命周期（父子组件）：index(父)；list(子)
创建由外至里，渲染由里至外；
index created > list created > list mounted > index mountedindex before update > list before update > list update > index update
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
Vue 组件常见的通讯方式：
父子组件 props 和 this.$emit
自定义事件 event.off event.$emit
vuex
双向数据绑定 v-model 的实现原理：
input 元素的 value = this.name
绑定 input 事件 this.name = $event.target.value
data 更新触发 re-render
computed 有何特点：
缓存，data 不变不会重新计算
提高性能
为何组件 data 必须是个函数：实际vue是个class，每个vue文件使用相当于对组件实例化，多个data中的数据会共享，参数发生改变时会随之变化
ajax 请求应该放在哪个生命周期：
mounted
JS 是单线程的，ajax 异步获取数据
放在 mounted 之前没有用，只会让逻辑更加混乱
如何将组件所有的 props 传递给子组件：
$poprs
<User v-bind = "$props" />
如何自己实现 v-model：
// 手写 v-model
<template>
<!-- 例如：vue 颜色选择 -->
<input type="text"
:value="text1"
@input="$emit('change1', $event.target.value)"
>
<!--
1. 上面的 input 使用了 :value 而不是 v-model
2. 上面的 change1 和 model.event1 要对应起来
3. text1 属性对应起来
-->
</template>
<script>
export default {
model: {
prop: 'text1', // 对应 props text1
event: 'change1'
},
props: {
text1: String,
default() {
return ''
}
}
}
</script>
多个组件有相同的逻辑，如何抽离：
mixin
以及 mixin 的一些缺点
何时使用异步组件：
加载大组件
路由异步加载
何时使用 keep-alive：
缓存组件，不需要重复渲染
如多个静态 tab 页的切换
优化性能
何时需要使用 beforeDestory：
解绑自定义事件 event.$off
清除定时器
解绑自定义的 DOM 事件，如 window scroll 等
作用域插槽
Vuex 中 action 和 mutation 有何区别：
action 中处理异步，mutation 不可以
mutation 做原子操作
action key整合多个 mutation
Vue-router 常用的路由模式
hash 默认
H5 history （需要服务端支持）
两者比较
监听 data 变化的核心 API 是什么：
Object.defineProperty
以及深度监听、监听数组
有何缺点
Vue 如何监听数组变化：
Object.defineProperty 不能监听数组变化
重新定义原型，重写 push pop 等方法，实现监听
Proxy 可以原生支持监听数组变化
请描述响应式原理：
监听 data 变化
组件渲染和更新的流程
Vue 为何是异步渲染，$nextTick 何用：
异步渲染（以及合并 data 修改），以提高渲染性能
$nextTick 在 DOM 更新完之后，触发回调
Vue 常见性能优化方法：
合理使用 v-show 和 v-if
合理使用 computed
v-for 时加 key，以及避免和 v-if 同时使用
自定义事件、DOM 事件及时销毁
合理使用异步组件
合理使用 keep-alive
data 层级不要太深
使用 vue-loader 在开发环境做模板编译（预编译）
webpack 层面的优化
前端通用的性能优化，如图片懒加载
使用SSR
