前端vue面试题汇总

Vue实现数据双向绑定的原理：Object.defineProperty（）

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

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

单向数据流可跟踪，数据流向单一，缺点是写起来不方便，特别是表单交互较多的场景下
双向数据绑定，数据之间相通，并且数据的变更隐藏在框架内部，不过会增加出错后debug的难度

Vue 如何去除url中的

vue-router默认的是hash模式，url会自带#，如果需要去除，可以使用history模式

对 MVC、MVVM的理解

MVC所有通信都是单向的
MVVM 各部分之间的通信都是双向的。采用双向绑定，view的变动会自动映射到viewmodel

什么是vue生命周期？vue生命周期总共有几个阶段，分别是什么？第一次页面加载会触发哪几个钩子

生命周期：八个阶段，创建前后，载入前后，更新前后，销毁前后。
会触发 下面这几个：beforeCreate, created, beforeMount, mounted 。
并且DOM 渲染在 mounted 中就已经完成了。

vue生命周期的8个阶段

beforeCreate（创建前） 在数据观测和初始化事件还未开始
created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

第一次页面加载会触发哪几个钩子

beforeCreate, created, beforeMount, mounted

其中DOM 渲染在 mounted 中就已经完成了

vue全家桶有哪些？

vue：主要Vue
​vue-router：关于路由方面的配置
​vuex：数据共享和缓存用
vue-resource：于后台交互用（现在改为axios 但是axios不是Vue里面的东西）
​vue-cli：快速创建项目的脚手架

解释一下keep-alive的作用是什么

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。
大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。

v-show和v-if指令的共同点和不同点？

共同点都是控制元素的显示和隐藏，
不同点是，v-show是控制显示隐藏，并且切换开销小，v-if是条件渲染，不停的创建和销毁比较小号性能，初始渲染开销小，切换开销大，如果需要频繁切换元素的显示和隐藏就用v-show

父组件传值给子组件，子组件传值给父组件，兄弟间传值？

1.父组件传值给子组件用props，
2.子组件传值给父组件用$emit,
3.兄弟间的传值使用bus，vuex

在vue中如何获取dom元素

vue为我们提供了ref属性。 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

<p ref="p"></p>
// 现在在你已经定义了这个 ref 的组件里，你可以使用：
this.$refs.p来操作这个DOM元素来。

vue不提倡我们操作DOM元素，因此在引用第三方插件或者项目中，尽量少的不要出现操作DOM元素。

vue单页应用，首屏加载如何优化？

安装动态懒加载所需插件，使用cdn资源托管

vue的两个核心点？

数据驱动，组件系统

Filter过滤器

文本数据格式化 , 也就是: 将数据按照我们指定的一种格式输出（可以直接说过滤）
​ 过滤器可以用在两个地方：{{}}和 v-bind 表达式
​ 两种过滤器：1 全局过滤器 2 局部过滤器

谈谈组件化和模块化的区别

模块化是为了重用，方便重复使用，弄到不同的平台或者系统上。
组件化主要是为了解耦，把系统拆分成多个组件，方便维护和独立升级。

请说下封装vue组件的过程？

● 首先，使用Vue.extend()创建一个组件
● 然后，使用Vue.component()方法注册组件
● 接着，如果子组件需要数据，可以在props中接受定义
● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法