Vue面试题后续

1.Vue 如何检测数组变化

数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，而是选择对7种数组（push,shift,pop,splice,unshift,sort,reverse）方法进行重写（AOP 切片思想）。

所以在 Vue 中修改数组的索引和长度无法监控到。需要通过以上7种变异方法修改数组才会触发数组对应的watcher进行更新

2.Vue的父子组件生命周期钩子函数执行顺序

• 加载渲染过程
• 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
• 子组件更新过程
• 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
• 父组件更新过程
• 父beforeUpdate -> 父updated
• 销毁过程
• 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

3.v-for为什么要加key 

如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是为Vue中Vnode的唯一标识，通过这个key，我们的diff操作可以更准确、更快速。
更准确：因为带key就不是就地复用了，在sameNode函数 a.key === b.key 对比中可以避免就地复用的情况。所以更加准确。
更快速：利用key的唯一性生成map对象来获取对应节点，比遍历方式块

4.vue-router 路由钩子函数是什么？执行顺序是什么？

路由钩子的执行流程，钩子函数种类有：全局守卫、路由守卫、组件守卫。

完整的导航解析流程：
1、导航被触发。
2、在失活的组件里调用 beforeRouterLeave 守卫。
3、调用全局的 beforeEach 守卫。
4、在重用的组件调用 beforeRouterUpdate 守卫（2.2+）。
5、在路由配置里面 beforeEnter。
6、解析异步路由组件。
7、在被激活的组件里调用 beforeRouterEnter。
8、调用全局的 beforeResolve 守卫（2.5+）。
9、导航被确认。
10、调用全局的 afterEach 钩子。
11、触发 DOM 更新。
12、调用 beforeRouterEnter 守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入

5.谈一下对 vuex 的个人理解 

vuex 是专门为 vue 提供的全局状态管理系统，用于多个组件中数据共享、数据缓存等。（无法持久化、内部内心原理是通过创造一个全局实例 new Vue）

 

主要包括以下几个模块：

• State:定义了应用状态的数据结构，可以在这里设置默认的初始化状态。
• Getter:允许组件从Store中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
• Mutation:是唯一更改 store 中状态的方法，且必须是同步函数。
• Action:用于提交 mutation，而不是直接变更状态，可以包含任意异步请求。
• Module:允许将单一的 Store 拆分更多个 store 且同时保存在单一的状态树中。

6.Vuex 页面刷新数据丢失怎么解决？

需要做 vuex 数据持久化，一般使用本地储存的方案来保存数据，可以自己设计存储方案，也可以使用第三方插件。
推荐使用 vuex-persist (脯肉赛斯特)插件，它是为 Vuex 持久化储存而生的一个插件。不需要你手动存取 storage，而是直接将状态保存至 cookie 或者 localStorage中。 

7.keep-alive 使用场景和原理

keep-alive 是 Vue 内置的一个组件，可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

• 常用的两个属性 include/exclude，允许组件有条件的进行缓存。
• 两个生命周期 activated/deactivated，用来得知当前组件是否处理活跃状态。
• keep-alive 运用了 LRU 算法，选择最近最久未使用的组件予以淘汰。
• 扩展补充：LRU 算法是什么？
• 

 

8. 写过自定义指令吗？原理是什么？

指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素添加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。

自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind

• 1、bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• 2、inserted：被绑定元素插入父节点时调用。
• 3、update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较前后的绑定值。
• 4、componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
• 5、unbind：只调用一次，指令与元素解绑时调用。

原理：
1、在生成 ast 语法树时，遇到指令会给当前元素添加 directives 属性
2、通过 genDirectives 生成指令代码
3、在 patch 前将指令的钩子提取到 cbs 中，在 patch 过程中调用对应的钩子。
4、当执行指令对应钩子函数时，调用对应指令定义方法。

9.diff 算法了解吗？ 

 diff算法采用同级比较。

• 1、tag 标签不一致直接新节点替换旧节点。
• 2、tag 标签一样。

  先替换属性

  对比子元素
  • 新老都有子元素，采用双指针方式进行对比
    sameVnode 判断tag和key完全相同为同一节点，进行节点复用
         头和头相等对比
         尾和尾相等对比
         头和尾相等对比

    ---

         sameVnode 的时候传入两个新老子节点patch(oldChild,newChild)
    乱序情况 -- 上面的都不符合，先遍历旧子节点数组形成 key值映射的map对象。
    然后根据新子节点数组循环 按照key值和位置关系移动以及新增节点 最后删除多余的旧子节点 如果移动旧节点同样需要patch(oldChild,newChild)
  • 新的有子元素，老的没有子元素。-- 直接将子元素虚拟节点转化成真实节点插入即可。
  • 新的没有子元素，老的有子元素。 -- 直接清空 innerHtml
• 3、无 tag 标签 -- 文本节点直接比较内容是否一致

10.实现双向绑定

我们还是以 Vue 为例，先来看看 Vue 中的双向绑定流程是什么的

1. new Vue()首先执行初始化，对 data 执行响应化处理，这个过程发生 Observe 中；defineReactive 时为每⼀个 key 创建⼀个 Dep 实例
2. 同时对模板执行编译，找到其中动态绑定的数据，从 data 中获取并初始化视图，这个过程发生在 Compile 中；初始化视图时读取某个 key，例如 name1，创建⼀个 watcher1
3. 同时定义⼀个更新函数和 Watcher，将来对应数据变化时 Watcher 会调用更新函数
4. 由于 data 的某个 key 在⼀个视图中可能出现多次，所以每个 key 都需要⼀个管家 Dep 来管理多个 Watcher;由于触发 name1 的 getter 方法，便将 watcher1 添加到 name1 对应的 Dep 中
5. 将来 data 中数据⼀旦发生变化,会首先找到对应的 Dep，通知所有 Watcher 执行更新函数；当 name1 更新，setter 触发时，便可通过对应 Dep 通知其管理所有 Watcher 更新

 

 

实现思路

1. defineReactive 时为每⼀个 key 创建⼀个 Dep 实例
2. 初始化视图时读取某个 key，例如 name1，创建⼀个 watcher1
3. 由于触发 name1 的 getter 方法，便将 watcher1 添加到 name1 对应的 Dep 中
4. 当 name1 更新，setter 触发时，便可通过对应 Dep 通知其管理所有 Watcher 更新