前端面试题小结

前言

简单复盘一下面试题。用的时候有时可以看文档或者查询百度，但当面试官一问就支支吾吾答不出个所以然，直接BBQ。下面是有些题是自己的理解有些是查的百度（直接抄答案）。自己理解的才过关。

介绍

开篇人家要是让自己介绍，下面有个大体的思路： 叫XXX，来应聘前端工程师岗位，从事前端开发X年多。第一家在XX任职，主负责哪一块；第二家在XX任职，多少年，项目主要有哪些。个人性格可以侃一侃，几句话带过。

• Vue题

1. vue封装指令，常用的指令

• 自定义封装指令:

全局：

Vue.directive('focus', {
    inserted: function(el) {
        el.focus()
    }
})

局部：

directives: {
    focus: {
        inserted: function(el) {
            el.focus()
        }
    }
}

• 常用：

  v-model:实现表单元素和数据的双向绑定，监听用户的输入，更新数据。

  v-show:根据条件展示元素，元素始终会被渲染并保留在DOM中，简单地切换元素的CSS property display。

  v-if:同v-show，元素是真渲染出来的。

  v-else-if:充当 v-if 的“else-if块”。

  v-else:顾名思义 搭配v-if的“else块”。

  v-text:innerText。

  v-html:渲染html字符串。

  v-for:循环。

  v-on:事件处理，v-on:click = @click, 修饰符:.stop|.prevent|.capture(与冒泡相反 从外到内)|.self|.once|等等。

  v-bind:缩写:->(prop)。

  v-cloak:设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除解决屏幕闪动。

  v-once:只渲染元素和组件一次。

2. vue中的key的作用，用到哪些地方

   作用:方便虚拟dom算法对节点追踪，方便重用修补重新排序重新创建

   地方:v-for遍历时,放key作为标记，方便diff算法操作

   template vue3可以放key了

3. diff算法有了解过吗

（1）、是什么

diff 算法是一种通过同层的树节点进行比较的高效算法

其有两个特点：

• 比较只会在同层级进行, 不会跨层级比较
• 在diff比较的过程中，循环从两边向中间比较

diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较

（2）、源码 （看源码）

4. vuex的原理 网状传值（乱、脆弱、不易维护）

抽出来一个全局仓库

未完待续。。。