Vue 高频面试题总结 内附答案

1、Vue 的最大的优势是什么？

1. 可以进行组件化开发, 大量减少代码的编写 更易于理解

2. 最突出的优势在于可以对数据进行双向绑定.

3. 相比传统的页面通过超链接的方式实现页面切换和跳转，vue 使用路由不会刷新页面

4. vue是单页面应用,不用每次跳转页面都要请求所有数据和dom，提高了访问速度和用户体验

5. 而且他的第三方组件库使用起来更加节省开发时间,从而提高开发效率

2、Vue 数据双向绑定的原理是什么?

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

v-model 的本质就是一个语法糖, 内部做了两件事

1.给 组件 绑定了一个 value 属性

2.给 组件 绑定了一个 input 事件, 事件触发时将绑定的变量重新赋值

3、Object.defineProperty 和 Proxy 的区别

1）Proxy 的优势如下:

Proxy 可以直接监听对象而非属性；

Proxy 可以直接监听数组的变化；

Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；

Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty 只能遍历对象属性直接修改；

Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

2）Object.defineProperty 的优势如下:

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用polyfill 磨平

4、第一次加载页面会触发哪几个钩子函数？

1. 创建vue实例之前: beforeCreate

2. 创建vue实例之后: created

3. 挂载前: beforeMount

4. 挂载后(初始渲染):mounted

5、请说下封装 Vue 组件的过程？

1. 使用 Vue.component 方法注册组件，子组件需要数据，可以在 props 中接受定义，而子组件修改好数据后，想把数据传递给父组件。可以采用$emit 方法向外抛数据

2. 如果需要给组件传入模板，则定义为插槽 slot

3. 如果需要 父组件主动调用子组件的方法 可以在 methods 选项中开放方法

6、Vue 组件如何进行传值的(父向子 子向父)?

父组件向子组件传递数据

父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数 props 接收即可

子组件向父组件传递数据

子组件通过 Vue 实例方法$emit 进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理

7、组件中写 name 选项有什么作用？

1. 项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤

2. DOM 做递归组件时需要调用自身 name

3. Vue-devtools 调试工具里显示的组见名称是由 Vue 中组件 name 决定的

8、Vue 组件 data 为什么必须是函数

1. 每个组件都是 Vue 的实例

2. 组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他

3. 组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

9、怎么捕获 Vue 组件的错误信息？

1. errorCaptured 是组件内部钩子，当捕获一个来自子孙组件的错误时被调用，接收 error、 vm、info 三个参数，return false 后可以阻止错误继续向上抛出

2. errorHandler 为全局钩子，使用 Vue.config.errorHandler 配置，接收参数与 errorCaptured 一 致，2.6 后可捕捉 v-on 与 promise 链的错误，可用于统一错误处理与错误兜底

10、Vue.cli 中怎样使用自定义的组件？

第一步：在 components 目录新建你的组件文件（indexPage.Vue），script一定要 export default {}

第二步：在需要用的页面（组件）中导入：import indexPage from'@/components/indexPage.Vue'

第三步 ： 注 入 到 Vue 的子组件的 components 属性上面,components:{indexPage}

第四步：在 template 视图 view 中使用，例如有 indexPage 命名，使用的时候则 index-page