Vue常见面试题(8)

1. Vue的双向绑定数据的原理

• vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式
• 通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调

2. 单向数据流和双向数据绑定

• 单向数据流：
  **定义：**数据流是单向的，数据流动方向可以跟踪。
  **缺点：**如果想让UI发生变更就必须创建各种 action 来维护对应的 state
• 双向数据绑定：
  **定义：**数据之间是相通的，将数据变更的操作隐藏在框架内部
  **优点：**是在表单交互较多的场景下，会简化大量与业务无关的代码
  **缺点：**就是无法追踪局部状态的变化，增加了出错时 debug 的难度

3.Vue生命周期函数

• beforeCreate() 在实例创建前执行，数据未加载状态
• created() 在实例创建后，能初始化数据，dom渲染之前执行
• beforeMount() 虚拟dom已创建完成，在数据渲染前最后一次更改数据
• mounted() 页面、数据渲染完成，真实dom挂载完成
• beforeUpadate() 重新渲染之前触发
• updated() 数据更新完成，dom 重新 render 完成,更改数据会陷入死循环
• beforeDestory() 和 destoryed() 前者是销毁前执行（实例仍然完全可用），后者则是销毁后执行

4. v-if 和 v-show 区别

• 使用 v-if 的时候，如果值为 false ，那么页面将不会有这个 html 标签生成。
• v-show 则是不管值为 true 还是 false ，html 元素都会存在，只是 CSS 中的 display 显示或隐藏

5.NextTick 作用

• nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
  具体可参考官方文档 深入响应式原理

6. Vue 单页面应用的优缺点

优点： 良好的交互体验，良好的前后端工作分离模式，减轻服务器压力
**缺点：**SEO难度较高，前进、后退管理，初次加载耗时多

7. Vue 自定义指令

全局注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部注册

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

参考 官方文档-自定义指令

8. 对 keep-alive 的了解

• keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

<keep-alive>
  <component>
    <!-- 该组件将被缓存！ -->
  </component>
</keep-alive>

• 可以使用API提供的props，实现组件的动态缓存

具体参考 官方API