JS 面试题

1. 你知道 Vue 响应式数据原理吗？Proxy 与 Object.defineProperty 优劣对比？

   • 响应式原理

     • vue 的响应式实现主要是利用了 Object.defineProperty 的方法里面的 setter 与 getter 方法的观察者模式来实现。在组件初始化时会给每一个 data 属性注册 getter 和 setter，然后再 new 一个自己的 Watcher 对象，此时 watcher 会立即调用组件的 render 函数去生成虚拟 DOM。在调用 render 的时候，就会需要用到 data 的属性值，此时会触发 getter 函数，将当前的 Watcher 函数注册进 sub 里。当 data 属性发生改变之后，就会遍历 sub 里所有的 watcher 对象，通知它们去重新渲染组件。

   • proxy 的优势如下：

     • Proxy 可以直接监听对象而非属性，可以直接监听数组的变化；
     • Proxy 有多达 13 种拦截方法,不限于 apply. ownKeys. deleteProperty. has 等等是 Object.defineProperty 不具备的；
     • Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；

   • Object.defineProperty 的优势如下:

     • 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill(垫片)来弥

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

   • 对于 Vue 来说，组件之间的数据传递具有单向数据流这样的特性称为单向数据流，单向数据流（Unidirectional data flow）方式使用一个上传数据流和一个下传数据流进行双向数据通信，两个数据流之间相互独立，单向数据流指只能从一个方向来修改状态。
   • 而双向数据绑定即为当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，两个数据流之间互为影响。

3. 对比 jQuery，Vue 有什么不同

   • jQuery 专注视图层，通过直接操作 DOM 去实现页面的一些逻辑渲染；
   • Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作。Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发 Vue 中怎么自定义指令

4. 通过 directive 来自定义指令，自定义指令分为全局指令和局部指令，自定义指令也有几个的钩子函数，常用的有 bind 和 update，当 bind 和 update 时触发相同行为，而不关心其它的钩子时可以简写。

js
    Vue.directive("focus", {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus();
        },
    });

    Vue.directive("color-swatch", function (el, binding) {
        el.style.backgroundColor = binding.value;
    });

5.Vue 等单页面应用的优缺点

• 优点

  1. 单页应用的内容的改变不需要重新加载整个页面，web 应用更具响应性和更令人着迷。
  2. 单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
  3. 单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
  4. 良好的前后端分离。后端不再负责模板渲染. 输出页面工作，后端 API 通用化，即同一套后端程序代码，不用修改就可以用于 Web 界面. 手机. 平板等多种客户端。

• 缺点

  1. 首次加载耗时比较多。
  2. SEO 问题，不利于百度，360 等搜索引擎收录。
  3. 容易造成 Css 命名冲突。
  4. 前进. 后退. 地址栏. 书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。

6.导航守卫的流程

• 导航被触发
• 在失活的组件里面调用beforeRouteLeave守卫
• 调用全局前置守卫（beforeRouteEnter）
• 在重用的组件里面调用beforeRouteUpdate守卫
• 在路由配置里调用beforeEnter
• 解析异步路由组件
• 在被激活的组件里面调用beforeRouteLeave守卫
• 调用全局的beforeResolve守卫
• 导航被确认
• 调用全局的afterEach钩子
• 触发DOM更新
• 调用beforeRouteEnter守卫传给next的回调函数，创建好的组件实例会作为参数传入