前端面试题总结（一）

Vue 部分

1、v-show跟v-if的区别？

相同点：v-if和v-show都可以动态控制dom元素的显示隐藏。

不通点：v-if是显示隐藏是将dom元素整个添加和删除，而v-show是隐藏是则是为该元素添加css-display：none，dom元素还在。

2、虚拟dom是什么？作用？

虚拟dom就是用js对象来描述真实Dom，是对真实Dom的抽象

• 由于直接操作Dom性能低，但是js层的操作效率高，可以将Dom操作转化成对象操作。最终通过 diff 算法比对差异进行更新Dom
• 虚拟Dom不依赖真实平台环境，可以实现跨平台

3.v-for跟v-if可以同时使用吗？

v-for比v-if优先级高，每次v-for都会执行v-if,造成不必要的计算，影响性能

4、v-for中的key的作用？

为了更高效使用虚拟dom配合diff算法更新视图 标签名一样，key一样采用就地复用策略

5、修饰符有哪些？

事件修饰符（常用）

stop 阻止事件冒泡

capture 捕获事件 给需要捕获的元素添加

self 只触发自己本身（相当于给所有子元素添加阻止冒泡）

prevent 阻止默认事件

v-model修饰符（常用）

trim 清除左右两边空格

number 转成数字类型

6、v-model（双向数据绑定）的原理？

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter， getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：

• 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通 知订阅者
• 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据， 以及绑定相应的更新函数 3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知， 执行指令绑定的相应回调函数，从而更新视图

7.vue文件中style中的scoped原理？

作用：防止组件的样式互相污染

原理：解析template里面的标签的时候,会在标签元素上添加一个唯一哈希值属性名，编译css样式时添 加属性选择器

8.$mount 跟el区别？

联系：$mount和el都是用来将vue实例挂载到dom上的

区别：el是自动挂载，$mount是手动挂载（灵活一点）

el本质也是调用$mount方法挂载（vue源码记载）

el的优先级比mount高（vue源码记载，绑定el，mount高（vue源码记载，绑定el，mount不会生效）

9.Computed 和 Watch 的区别

对于Computed：

• 它支持缓存，只有依赖的数据发生了变化，才会重新计算
• 不支持异步，当Computed中有异步操作时，无法监听数据的变化
• computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声 明 过，或者父组件传递过来的props中的数据进行计算的。
• 多对一的关系

对于Watch:

• 它不支持缓存，数据变化时，它就会触发相应的操作
• 支持异步监听
• 监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
• 当一个属性发生变化时，就需要执行相应的操作
• 监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他 操 作
• 监听属性参数：
• immediate：组件加载立即触发回调函数
• deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变 化。需要注 意的是，deep无法监听到数组和对象内部的变化。

10.谈谈你对生命周期的理解？什么阶段触发？

• beforeCreated：实例初始化前，不能访问data，computed，methods，props等属性方法
• created：已经创建完毕，此时可以访问初始化传入的data，computed，methods，props可以
• beforeMount：$el还未生成，dom元素渲染到页面之前
• mounted：$el已生成，dom元素已经渲染到页面（可以获取dom）
• beforeUpdate：数据更新前，被调用，发生在虚拟Dom重新渲染和打补丁之前
• updated：由于数据更改导致的虚拟Dom重新渲染和打补丁
• beforeDestroyed：销毁前，Vue实例中的所有数据都是可以访问的； （清除定时器和解绑事件监听）
• destroyed：销毁完毕，，Vue实例中的所有数据都是可以访问的；（清除定时器和解绑事件监听）