前端VUE面试

1.vuex在组件中的使用方法。

• state中定义数据 组件中使用this.$store.state.变量名
• mutation更改store中状态的方法 组件中使用this.$store.commit
• anction异步更改状态 组件中使用this.$stare.dispatch
• getter获取stare数据的方法 相当于我们常用的computed计算属性 组件中使用this.$store.getters.方法名
• vuex数据持久化localStorage中，在页面重新加载后再将数据取出，通过vuex的$store.replaceState
  将数据替换到store中。

2.父子组件的生命周期执行顺序。

1. 父组件的beforeCreate
2. 父组件的Created
3. 父组件的beforMount
4. 子组件的beforCreate
5. 子组件的Create
6. 子组件的beforMount
7. 子组件的父Mounted
8. 父组件的Mounted

3.watch怎么实现深度监听

• 给变量加引号点出来指定要监听的数据 ’object.a‘
• 给要监听的数据绑定一个方法（handler immediate设置为true
  这代表着监听里面声明了newVal后会立即执行handler方法 如果设置为false则会在绑定的时候就执行。 deep更改为true。

4.双向数据绑定的原理

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

5.防抖节流的应用场景和实现方法

1. 节流

点击按钮发送请求在一定时间用户多次点击造成请求多次发送 定义一个变量为真判断这个变量进入后立即更改为假 在数据请求回来后改为真。

1. 防抖

在监听页面滚动事件在展示或隐藏页面元素是会跟随滚动多次显示隐藏 设置一个变量等于定时器在一定时间内变量如果等于定时器则清除定时器
并且重新定义一个新的时间相同的定时器 没有则直接创建一个定时器。

6.计算属性和监听属性的区别和应用场景

• watch：检测属性的值，只要值发生变化都会执行回调函数
• computed：检测属性的依赖，依赖不变的情况下执行缓存，依赖变化的情况才会重新计算

7.计算属性的get和set

• 计算属性默认只有get属性 set属性需要重新计算 get必须要有返回值
• set 监听当前属性值的变化，当属性发生变化的时候执行，更新相关的属性数据

8.父子组件的传值

• 父组件向子组件传值使用porps
• 子组件向父组件传值使用$emit
• 兄弟之间使用vuex 或者 使用浏览器localStorage或SessionStorage
• 子组件使用$parent可以获取父组件数据
• ref可以获取到子组件的数据

9.首页优化的方法

1. 减少ajax请求
2. 使用图片懒加载
3. 使用精灵图/雪碧图
4. 可以使用字体图标的使用字体图标
5. 优化js代码吧重复执行的js代码整合
6. 使用cdn加速

10.图片懒加载的实现

图片是根据src属性来获取图片的我们先让img的src等于空 当img图片滑动到可视区域在赋值图片地址

11.seo是什么

seo是优化页面代码让百度爬虫更好的爬取网站内容 来提升页面的搜索排名获取更多的流量展示

12.nuxt为什么可以实现seo优化

首先vue是单页面应用程序百度爬虫爬取的是一段js代码没有内容 nuxt的在服务端就把页面渲染完成然后直接返回给浏览器
这样查看网页源代码就不会是之前的一段js代码而是有内容的代码

13.beforDestroy中写过什么代码

这个生命周期主要用来关闭或销毁一些事件 监听属性的关闭 定时器的关闭

14.npm报错怎么解决

• 先看报错信息 如果看不懂
• 试着删除node_mode
• 百度查询报错原因及解决方法

15.v-for的:key作用

key的作用主要是为了高效的更新虚拟DOM，虚拟DOM中的最小量更新使用

16.解释一下深拷贝和浅拷贝

• 浅拷贝 直接等号赋值更改数据会相互影响
• 深拷贝 我一般使用JSON.stringify转换为字符串在JSON.parse转为对象

17.微信支付API的申请流程（没有回答

18.nuxt和vue的区别

nuxt和vue的最大区别就是nuxt是在服务端渲染的所以页面初始化请求数据的时候
不能再created里面进行需要在nuxt的asyncDate中发送请求 asyncDate中没有this 也没有 windos对象
数据最后需要return出去作用和data一样

19.vue的data为什么不是一个对象是一个函数

因为javascript的特性导致，data写成一个函数，数据以函数返回值的形式定义
这样每次复用组件的时候，都会重新返回一份新的data，相当于每个组件实例都有 自己私有的数据空间，各自负责各自的数据不会造成混乱。

20.vue的router的拦截器有哪些参数都是什么含义

• 全局前置守卫
• 全局后置钩子
• 路由独享守卫

to代表即将进入的页面 from代表当前正在离开的页面 next进行管道中的下一个钩子全部执行完后路由状态就是确认的

21.判断JS数据类型的方法

• typeof
• instanceof
• toString

22.MVVM的理解

我的理解就是数据改变可以更新视图，视图改变可以更改数据

23.diff算法 最小量更新

• diff算法是先定义了4个指针分别是，新前，旧前，新后，旧后
• 先做四次命中查找 命中查找的先后顺序是

新前 -> 旧前
新后 -> 旧后
新后 -> 旧前
新前 -> 旧后

1. 命中查找完如果都没有命中则进行循环判断
2. 如果有一个命中则不执行之后的查找
3. 之前两种命中查找命中成功只改变指针
4. 特别要注意的是 新后 -> 旧前 和 新前 -> 旧后这两种命中方式
5. 如果这两个命中则需要改变数据位置并且把当前项设置为null且更改指针