Vue Interview

Single Page Application

SPA 仅在 Web 页面初始化时加载相应的 HTML,JavaScript, CSS. 使用路由机制改变 HTML 的内容, 避免页面重复加载.

• 用户体验好, 服务器压力小, 前后端分离

• 初次加载较慢, 路由管理复杂, SEO 难度大

v-show 与 v-if 有什么区别

• v-show 总是渲染元素, 调整 CSS 的 display 属性.

• v-if 是条件渲染.

Class 与 Style 动态绑定

<div
  v-bind:class="{ active: isActive }"
>
</div>

<div
  v-bind:class="[isActive ? 'active' : '']"
>
</div>

单向数据流

父级 prop 更新会向下流动到子组件中, 但是反过来则不行. 这样会防止从子组件意外改变父级组件的状态, 从而导致应用的数据流向难以理解.

computed 与 watch 的区别和运用的场景

• computed: 计算属性, 缓存计算结果.

• watch: 每当数据变化时执行回调函数.

Vue 生命周期

• beforeCreate: 初始化 Vue 实例, data, methods 数据还未生效

• created: 初始化 data 与 methods, 可以操作这些数据或调用方法

• beforeMount: 执行模板中的指令, 最终模板字符串完成编译, 但尚未挂载到页面

• mounted: 将内存中编译好的模板挂载到页面上, 此时可以操作组件中的 DOM 节点

• beforeUpdate: 组件数据更新之前

• update: 组件数据更新之后

• activated: keep-alive 专属，组件被激活时调用

• deactivated: keep-alive 专属，组件被销毁时调用

• beforeDestroy: 组件销毁前, 尚未清除 data 与 methods 等属性

• destroy: 组件销毁后

父组件与子组件生命周期顺序

• 加载渲染过程: 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 子组件更新过程: 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

异步请求

异步请求可以在 created, beforeMount, mounted 中进行调用.

访问或操作 DOM

在钩子函数 mounted 被调用前, Vue 已经将编译好的模板挂载到页面上, 所以在 mounted 中可以访问操作 DOM.

父组件监听子组件生命周期

<Child
  @hook:mounted="doSomething"
>
</Child>

v-model 原理

v-model 在内部为不同的输入元素使用不同的属性与事件.

• text, textarea 元素使用 value 属性和 input 事件

• checkbox, radio, select 使用 checked 属性和 change 事件

在自定义组件中, v-model 默认会使用 value 的 prop 和名为 input 的事件.

组件间通信方式

• props, $emit (父子)

• ref, $parent/$children (父子)

• $attrs, $listeners (隔代)

• Vuex (父子, 隔代, 兄弟)

Router 路由模式

• hash: 使用 URL Hash 模拟完整 URL

• history: 依赖 HTML5 History API 与服务器配置

• abstract: 支持所有 JavaScript 运行环境 (包括 Node.js 服务端)

hash 模式原理

• hash 值 (location.hash) 是 URL 中 # 后面的内容

• hash 值只是客户端的一种状态, 当向服务器端发出请求时, hash 部分不会被发送

• 可以使用 a 标签或修改 location.hash 改变 hash 值

• 可以使用 hashchange 事件来监听 hash 值的变化, 从而改变页面内容

history 模式原理

• history.pushState(): 新增浏览器历史记录

• history.repalceState(): 替换浏览器历史记录

• 使用 popstate 事件来监听 URL 的变化, 从而改变页面内容

Model–View–ViewModel (MVVM)

• View: 视图层 (HTML, CSS)

• Model: 数据模型 (API 接口)

• ViewModel: 视图数据层 (ViewModel 封装出来的数据模型包括视图的状态与行为两部分, 而 Model 层的数据模型是只包含状态的)

Vue 实现了双向绑定, 即 ViewModel 的内容会实时展现在 View 层. View 层展现的不是 Model 层的数据, 而是 ViewModel 的数据, 并由 ViewModel 负责与 Model 层交互.

<!-- View -->
<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

<!-- ViewModel -->
<script>
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  }
})
</script>

<!-- Model -->
<script>
const response = {
  "response": {
    "success": true
  }
}
</script>

数据双向绑定原理

双向绑定指 View 变化更新 Data, Data 变化更新 View. View 变化更新 Data 可以通过事件监听的方式来实现.

Vue 2 实现双向绑定

1. 监听器: 遍历数据对象, 使用 Object.defineProperty() 对属性注入 Getter 与 Setter, 用于监听对象赋值.

2. 解析器: 解析 Template, 将 Template 中的变量都替换成数据. 渲染页面视图, 将每个指令对应的节点绑定更新函数, 添加监听数据的 Watcher. 一旦数据有变动, Watcher 收到通知并调用更新函数进行数据更新.

3. 订阅者: 订阅监听器中的属性值变化的消息, 当收到属性值变化的消息时, 触发解析器中对应的更新函数.

4. 订阅器: 订阅器采用 "发布-订阅" 设计模式, 统一管理监听器与订阅者.

Proxy 与 Object.defineProperty

• Proxy 可以直接监听对象而非属性

• Proxy 可以直接监听数组的变化

• Proxy 不会直接修改原对象

• Object.defineProperty 兼容性好, 支持 IE9. Proxy 兼容性差, 难以 Polyfill.

Vue.set

Vue 会在初始化实例时对属性执行 Getter/Setter 转化, 所以属性必须提前定义在 data 对象中. Vue 无法检测到添加或删除对象的属性, 也无法检测到使用 Index 对数组的直接赋值.

this.$set(this.someObject, 'b', 2); // Object
this.$set(this.items, 1, 'value'); // Array

• 如果目标是数组, 直接使用数组的 splice 方法触发响应式.

• 如果目标是对象, 会先判读属性是否存在, 是否是响应式, 并注入 Getter/Setter.

Virtual DOM 优点

• 保证性能下限: 框架提供的 Virtual DOM 保证无需手动优化的情况下提供不错的性能.

• 无需手动操作 DOM: 开发者只需要写好 View-Model 的代码逻辑, 框架会利用 Virtual DOM 与数据双向绑定帮助我们以可预期的方式更新视图, 提高开发效率.

• 跨平台: Virtual DOM 本质是 JavaScript 对象, 而 DOM 依赖于浏览器. Virtual DOM 可以用于服务端渲染, Weex 开发等.

Virtual DOM 实现原理

1. 用 JavaScript 对象模拟 DOM 树

2. diff 算法 - 比较两颗 Virtual DOM 树的差异

3. patch 算法 - 将差异更新到真实 DOM 树

key 的作用

key 是 VNode 的唯一标记, 用于优化 diff 操作的性能.

项目优化

• v-if 与 v-show 区分使用场景

• computed 和 watch 区分使用场景

• v-for 遍历必须使用 key

• 长列表性能优化

• 事件的销毁

• 图片资源懒加载

• 路由懒加载

• 第三方插件的按需引入

• 优化无限列表性能

• 服务端渲染