Vue面试题

1. defineProperty接收哪三个参数？

object（必须有 操作的对象本身）

propertyname (必须有 属性名 添加修改属性得有属性名)

descriptor （必须有 属性描述)

• 简单点就是 设置属性的值value，

• 是否可操作属性值 writable，

• 是否可修改配置configurable(如果值为false descriptor内的属性都不可操作）

• 是否可枚举enumerable

2. vue路由的传参方式有哪些？

• query：在地址栏用类似于get、请求方式传参，没有限制。

• params：params跳转不能用path匹配，只能用name命名路由匹配。

  • 显示的：就是动态路由，好处是参数在地址栏里，刷新页面不会丢失。

  • 隐示的：使用params传递一个任意的数据，并且该数据在页面刷新后会丢失。

• $router.push()

3. vue是什么，有哪些好处或者缺点？

vue是以数据驱动视图的单页面渐进式MVVM框架，特点是数据双向绑定。

• 好处：

  • 单页面应用，无刷新跳转路由

  • 模块化开发，便于维护和迭代

  • 强大的生态圈，开发快速

• 缺点：SEO优化不好。

4. watch 和 computed 的异同

• 相同点：对数据进行监听

• 不同点：watch 监听器 默认对监听的简单数据做响应，如果是数组或对象，需要开启深度监听。computed 计算属性 对一个数据进行监听操作，并返回一个新的数据。默认是只读的，如需修改使用set 函数。不受数据类型的限制，没有深度监听的概念，有缓存。

5. vuex的几大组成部分

• state：核心的，管理数据的，等价于组件里的 data

• getters：对 state 进行计算，等价于组件里的 computed，不能对 state 进行修改

• mutations：只能执行同步代码，唯一可以修改 state 的函数。(使用 commit 调用)

• actions：可以执行任意代码，一般用于接口请求，得到的返回值通过调用 mutations 去修改 state。(使用 dispatch 调用)

• plugins：扩展 vuex 功能的插件接口，一般用于做本地数据持久化。

6. $route和$router区别

• $route：当前路由信息

• $router：路由的实例对象，拥有全部的路由功能

7. vue中组件通信的几种方式

• 父传子：父组件使用 v-bind 向子组件传入数据，子组件使用 props 接收数据

• 子传父：父组件使用 v-on 向子组件传入函数，子组件使用$emit调用该函数

• 父子通信：v-bind+props 配合 v-on+$emit；v-model 向子组件传入一个 value 值和 input 函数；修饰符 sync 可以让子组件使用特定语法直接修改 props$emit('update:sync',newValue)

• 跨级通信：$attrs+$listeners；vuex；bus【废弃，1.0 产物】 new Vue 作为一个中间插件，实现各个组件的通信。

8. vue跳转方式

• 声明式导航：<router-link :to=""></router-link>

• 编程式导航：用js跳 this.$router.push/replace("")

• next()

9. vuex的数据持久化的原因？

vuex 数据默认存于内存中，刷新页面的时候程序重新初始化，数据就会丢失，于是需要把 state 的值存在本地的 store 中。

10. object.defineProperty有哪些缺点？

• 只能监听数据的变化，不支持数组

• 只能监听数组内容的改变，没办法监听到数组长度的改变

11. 说一下什么是数据双向绑定？

数据双向绑定的意思就是，当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

12. 说出几个vue的指令

• v-if 控制元素的加载与销毁，属于回流，用js控制，对浏览器性能开销大

• v-show 控制元素的显示与隐藏，属于重绘，用css控制display属性，对浏览器性能开销小

• v-for 循环渲染指令，

  • 值：如果是纯值，value；如果是数组，item

  • 下标：index

  • key：由于v-for循环渲染，遍历出来的是通过js算法得到的虚拟dom，当需要修改其中某个元素的时候，如果不加key，每次变动，都要重新循环计算生成，对性能开销大。key就是每一个虚拟dom的身份证，表示元素的唯一标识，这样在修改的时候，通过key可以只对某元素修改。

  • 虚拟dom：用js计算出来的，它不是原生标签。

• v-bind 绑定属性，既可以绑定原生属性，也可以绑定自定义属性，缩写：

• v-on 绑定事件，既可以绑定原生事件，也可以绑定自定义事件，缩写@

• v-model 数据双向绑定

• v-text 渲染文本，相当于innerHtml

• v-html 渲染字符串类型的dom片段

• v-once 让事件触发一次

13. vue生命周期

定义：生命周期就是页面从初始化到完成渲染，经过更新最后销毁的过程。 四个阶段

• 创建阶段 第一次页面加载执行(一次性) beforeCreate 创建前 created 创建后

• 挂载阶段 第一次页面加载执行(一次性) beforeMount 挂载前 mounted 挂载后 当组件被展示在 html 里的时候，用于自动发起请求等操作。

• 更新阶段 无论是自己还是父级组件，当 data 或 props 的数据被修改时触发 该阶段函数中不可以修改 data 数据 beforeUpdate 更新前 updated 更新后

• 销毁阶段 当父组件使用 v-if 控制当前组件不显示时，以为这该组件被销毁 beforeDestroy 销毁前 用于清理销毁全局变量或者常驻内容的垃圾数据，比如定时器 destroyed 销毁后

14. 内置组件有哪几种分别是干什么的？

• component 动态加载组件

• keep-alive 缓存组件状态

• slot 插槽组件

• template 模板容器

15. 路由拦截器

• 全局前置守卫：beforeEach

• 组件的离开守卫：beforeRouteLeave

• 组件的更新守卫：beforeRouteUpdate

16. 循环渲染为什么加key？

由于v-for循环渲染，遍历出来的是通过js算法得到的虚拟dom，当需要修改其中某个元素的时候，如果不加key，每次变动，都要重新循环计算生成，对性能开销大。key就是每一个虚拟dom的身份证，表示元素的唯一标识，这样在修改的时候，通过key可以只对某元素修改。