v-show 和 v-if 区别

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

为何在 v-for 中使用 key

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

描述 Vue 组件的生命周期 (父子组件)

• 挂载阶段 created mounted

  created 并未开始渲染，Vue 实例已初始化完毕，仅存在于内存
  mounted 渲染完毕

• 更新阶段 updated
• 销毁阶段 destroyed

(父子组件)

• created 创建：外到内(父到子)
• mounted 渲染：内到外
• updated 更新：由外到内开始，由内到外结束
• destroyed 销毁：由外到内开始，由内到外结束

Vue 组件如何通讯 (常见)

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

描述组件的渲染更新过程

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

• input 元素的 value = this.name
• 绑定 input 事件 this.name = $event.target.value
• data 更新触发 re-render

对于 MVVM 的理解

computed 有何特点

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

为何组件 data 必须是一个函数

• Object 是引用数据类型，如果不用 function 返回，每个组件的 data 都是内存的同一个地址，一个数据改变了其他也改变了
• JavaScript 只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及 if(){}都不构成作用域,data 是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

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

• mounted
• JS 是单线程，ajax 异步获取数据
• 放在 mounted 之前没有用 (存在异步队列中)，只会让逻辑更加混乱

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

• $props

如何自己实现 v-model

<template><!-- 例如：vue 颜色选择 --><input type="text" :value="text1" @input="$emit('change1', $event.target.value)" /><!--1. 上面的 input 使用了 :value 而不是 v-model2. 上面的 change1 和 model.event1 要对应起来3. text1 属性对应起来-->
</template><script>export default {model: {prop: 'text1', // 对应 props text1event: 'change1',},props: {text1: String,default() {return ''},},}
</script>

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

• mixin
• 缺点

何时要使用异步组件

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

何时需要使用 keep-alive

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

何时需要使用 beforeDestroy

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

什么是作用域插槽

• 略

Vuex 中 action 和 mutation 区别

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

Vue-router 常用的路由模式

• hash 默认
• H5 history 需服务端支持
• 二者比较

如何配置 vue-router 异步加载

• component: () => import('./xxx')

用 vnode 描述一个 DOM 结构

{tag: 'div',props: {className: 'container',id: 'div1'},children: [{tag: 'p',children: 'vdom'},{tag: 'ul',props: {style: 'font-size: 20px'},children: [{tag: 'li',children: 'a'}// ...]}]
}

监听 data 变化的核心 API

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

Vue 如何监听数组变化

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

描述响应式原理

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

diff 算法的时间复杂度

• O(n)
• 在 O(n^3) 基础上做了一些调整

简述 diff 算法过程

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

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

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

Vue 常见性能优化方式

• 合理使用 v-show 和 v-if
• 合理使用 computed
• v-for 加 key ，避免和 v-if 同时使用
• 自定义事件、DOM 事件及时销毁
• 合理使用异步组件
• 合理使用 keep-alive
• data 层级不要太深
• 使用 vue-loader 在开发环境进行模板编译(预编译)
• webpack 层面的优化
• 前端通用的性能优化，如图片懒加载
• 使用 SSR