虚拟dom

snabbdom.js

通过 snabbdom 学习 vdom

• 简洁强大的 vdom 库，易学易用
• Vue 参考它实现的 vdom 和 diff
• https://github.com/snabbdom/snabbdom

初次渲染过程

• 解析模板为 render 函数（或在开发环境已完成，vue-loader）
• 触发响应式，监听 data 属性 getter setter
• 执行 render 函数，生成 vnode ， patch(elem, vnode)

更新过程

• 修改 data，触发 setter（此前在 getter 中己被监听）
• 重新执行 render 函数，生成 newVnode
• patch(vnode, newVnode)

异步渲染

• 回顾 $nextTick
• 汇总 data 的修改，一次性更新视图
• 减少 DOM 操作次数，提高性能

history 路由

• hash - window.onhashchange
• H5 history - history.pushState 和 window.onpopstate
• H5 history 需要后端支持

面试题

为何在v-for 中用 key

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

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

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

对MVVM的理解

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

闭包，避免data污染全局

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

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

如何自己实现 v-model

v-model是一个语法糖,如下:

    <input type="text" v-model="name" />

其实等同于下面的代码:

    <input type="text" :value="name" @input="name = $event.target.value" />

实现

    <!-- 定义子组件 -->
    <child-model v-model="name" />
    <!-- 子组件 -->
    <input type="text" :value="value" @input="$emit('input', $event.target.value)"

Vuex 中 action 和 mutation 有何区别

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

Vue 常见性能优化方式

• 合理使用 V-show 和 v-if

• 合理使用 computed

• V-for 时加 key 以及避免和 v-if 同时使用

• 自定义事件、DOM 事件及时销毁 合理使用异步组件 合理使用 keep-alive

• data 层级不要太深 使用 vue-loader 在开发环境做模板编译（预编译）