前端面试题（vue篇）

1、vue数据双向绑定

• 通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调
• 首先我们为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者，v-model会添加一个订阅者，{{}}也会，v-bind也会，只要用到该属性的指令理论上都会，接着为input会添加监听事件，修改值就会为该属性赋值，触发该属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图

2、什么是 MVVM？

• M 数据 从后台获取的商品数据
• V 视图 就是写好的页面，每一个div，每一个input 都是视图，代表UI 组件
• VM 视图模型，
• 数据发生变化，通过视图模型会改变视图的显示，视图上的改变，也会通过视图模型进而影响数据的变化

3、vue的生命周期 

• 创建前后beforeCreate created
• 载入前后beforeMount mounted
• 更新前后beforeUpdate updated
• 销毁前后beforeDestroy destroy

4、DOM 渲染在 哪个周期中就已经完成

mounted 

5、ajax请求在vue中在哪个生命周期中？

在created以及mounted中 

6、beforeDestroy有没有this

没有 

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

beforeCreate， created， beforeMount， mounted 

8、computed和watch的区别

计算属性computed

• 支持缓存，只有依赖数据发生变化时，才会重新计算函数
• 不支持异步操作
• 自动监听依赖值的变化，从而动态返回内容

侦听属性watch

• 不支持缓存，只要数据变化，就会执行侦听函数
• 支持异步操作，
• 监听是一个变化，在监听的值变化是，可以触发一个回调，并做一些其他事情 

9、计算属性comput和普通函数method的区别

• 计算属性computer初次执行函数后，值会存储缓存中，依赖项未改变，不会再执行函数而是从缓存中立即取出
• method中的函数每次调用都会执行一次

10、vue 常用的指令都有哪些？并且说明其作用 

• v-model 实现数据双向绑定
• v-bind 操作元素属性
• v-on 实现事件绑定
• v-if 判断这个标签是否渲染
• v-for 根据数据对标签进行循环渲染
• v-show 判断这个标签是否显示（不会影响dom树）
• v-cloak 解决插值表达式闪动
• v-once 只编译一次，显示内容后不在进行响应式
• v-text 填充文本 相比插值表达式更加简介
• v-html 填充HTML片段 存在安全问题,本网站内部数据可以使用,来自第三方的数据不可以用

11、v-if 和v-show的区别 

• v-if 在进行切换时，会直接对标签进行创建或销毁，不显示的标签不会加载在 DOM 树中。
• v-show 在进行切换时，会对标签的 display 属性进行切换，通过 display 不显示来隐藏元素。
• 一般来说，v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。

12、v-for 中 key 的作用是什么？

key属性可以用来提升v-for渲染的效率！

在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识。

 13、vue 常用的修饰符都有哪些？

事件修饰符

• enter 回车 delete 删除
• stop 阻止冒泡 prevent 阻止默认行为
• self 事件从侦听器绑定的元素本身触发时才出发回调
• once 只触发一次回调

表单

• number 进行数字类型转换
• lazy 将input事件转换为change事件
• trim 进行对表的两边空白去除

14、为什么vue中 data数据是要return出来

是每个组件实例都有自己的作用域，避免造成变量污染

data是一个函数，函数相当于一个闭包，要想使用函数内部数据，就需要return出来

15、vue组件之间的通信方式 

父 -->子 自定义属性暴露， props 接收

子--> 父 $emit 保留自定义事件， 父@监听这个自定义事件

跨组件 通过事件中心， emit暴露事件, on监听事件

16、Vue-router有哪几种导航钩子函数路由拦截，全局守卫你怎么做得 

全局路由守卫

• beforeEach
• afterEach

组件路由守卫

• beforeRouteEnter
• beforeRouteLeave
• beforeRouteUpdate

独享路由守卫

• beforeEnter

17、Vue2.0和3.0的区别

项目目录结构

• vue-cli2.0与3.0在目录结构方面，有明显的不同
• vue-cli3.0移除了配置文件目录，config 和 build 文件夹，同时移除了 static 静态文件夹，新增了 public 文件夹，打开层级目录还会发现， index.html 移动到 public 中

配置项

• 3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同
• 没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变

数据监听

• vue2.x使用的是es5的object.defineproperties中getter和setter实现的
• vue3.0的版本，是基于Proxy进行监听的，可以理解为‘按需监听’，官方给出的诠释是：速度加倍，同时内存占用还减半。

18、vue 的路由实现模式：hash 模式和 history 模式

 hash 模式的url 永远带着 # 号，在开发中默认使用这个模式，

如果用户考虑url的规范的话就要使用 history模式，因为这个模式没有#号，适合做推广宣传。

功能也有区别， 比如在开发app的时候有分享页面，这个分享出去的页面就是用vue或者 react做的，把这个页面分享到第三方app里，有的app是不允许出现#号的，那么就要使用history模式去掉#号

但是使用history时在访问二级页面时，做刷新操作会出现 404 错误，这时候需要和后端人员配合让他配置以下 apache 或者 nginx 的url重定向就可以了

19、vue虚拟dom

vue在页面上渲染的节点，及其子节点成为“虚拟节点”,简写为“vnode”,

虚拟DOM是由vue组件树监理建立起来的整个Vnode树的称呼

20、DOM和虚拟DOM的区别

DOM

• DOM是由浏览器中的JS提供功能，所以我们只能人为的使用
• 浏览器提供的固定的API来操作DOM对象；
• 本质上就是用JS表示的UI元素

虚拟DOM

• 虚拟DOM并不是由浏览器提供的，而是我们程序员手动模拟实现的
• 优化频繁操作DOM引发性能问题的产物，将页面的状态抽象为JS对象的形式
• 本质上是JS和真实DOM的中间层

21、vue性能优化

• 减少data中的数据
• v-for和v-if不能连用
• 更多情况下，使用v-if代替v-show
• 使用懒加载和异步组件
• 按需导入
• 图片懒加载

22、请描述封装Vue组件的作用过程

使用 vue.extend 方法创建一个组件，然后使用 vue.component 方法注册组件；子组件需要数据，可以在 props 中接受定义，子组件修改好数据后，采用 emit 传递给父组件

23、在Vue项目中对Axios进行二次封装 

 

24、$route和 $router的区别是什么？

$route是获取路由信息的一个对象

$router 的作用是进行路由跳转的！

25、动态绑定 Class 有几种方式？

//第一种
:class="{ 'active': isActive }"
//第二种
:class="{'active':isActive==-1}"
//第三种
:class="{ 'active': isActive, 'sort': isSort }"
//第四种
:class="classObject"
data() {
  return {
    classObject:{ active: true, sort:false }
  }
}
//第五种
:class="classObject"
data() {
  return {
    isActive: true,
    isSort: false
  }
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      sort:this.isSort
    }
  }

26、Vue 如何获取 DOM 元素？

 jquery操作dom

原生js操作dom

vue官方方法：ref

• 设置了一个button按钮，通过点击事件，然后弹出 新增的弹框 , 然后点击 “ × ”的button按钮，关闭弹框，此时需要操作弹框的dom元素，通过ref定义一个名字， 然后在方法中通过  this.$refs.名字  获取对应的dom

27、路由之间跳转

 声明式

//路由入口
<router-link :to="...">
//视图出口
<router-view></router-view>
//路由入口
<router-link :to="...">
//视图出口
<router-view></router-view>

编程式

//push
// 字符串
   this.$router.push('home')
// 对象
   this.$router.push({ path: 'home' })
// 命名的路由
   this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=123
   this.$router.push({ path: 'register', query: { plan: '123' }})

//go
// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退

//replace
// 一般使用replace来做404页面
this.$router.replace('/')

28、ref属性有什么作用？

•  可以通过为子组件设置ref，然后通过this.$refs.refName（refName为子组件的ref值）获取到子组件，然后就可以随意调用子组件的方法和属性了。
• 可以为子组件或想要操作的DOM标签添加ref属性，然后通过this.r e f s . r e f N a m e . refs.refName.refs.refName.el或者this.$refs.refName来获取DOM。
• 自定义组件使用ref属性，通过ref值可获取到该自定义组件；
• 普通HTML标签使用ref属性，通过ref值获取到的是该标签对应的DOM；

29、vuex用过吗？

多个组件共享数据或者是跨组件传递数据时 vuex 

30、vuex的五个核心属性

state ：基本数据<br />

getters ：从基本数据(state)派生的数据，相当于state的计算属性

mutations ：提交更改数据的方法，同步！

actions ：像一个装饰器，包裹mutations，使之可以异步。

modules ： 模块化Vuex

31、vuex使用store中的变量 

未经过getters处理的变量，直接通过mapState获取

import { mapState } from 'vuex';
// ...
computed: {
	...mapState(['user']),
}
// ...
// 使用：
console.log(this.user.userInfo);

经过getters处理的变量，通过mapGetters获取

import { mapGetters } from "vuex";
// ...
computed: {
    ...mapGetters(['count']),
},
// 使用
console.log(this.count);