vue相关面试题

vue篇

一、vue组件 父子、子父 、兄弟通信

1. 父传递子 在父组件中给子组件标签上绑定一个属性，属性上挂在需要传递的值 在子组件通过peops：[“自定义属性名”]来接收数据

2. 子传递父

   （1）在父组件中给子组件标签绑定一个自定义事件，给这个事件 挂载需要调用的方法

   （2）在子组件的方法通过this.$emit(’自定义事件名‘)来调用这个方法

3. 兄弟组件通信

   （1）创建一个空的vue实例BUS

   （2）通过BUS.$emit（‘事件名‘）传到空的vue实例中

   （3）通过BUS.$on(‘事件名’，（参数）>{挂载从子1传来的数据})来接收

二、vue自定义指令

自定义指令分为：全局自定义指令，局部自定义指令。

• 使用Vue.directive('focus',{bind(el,binding){},inserted(){}})进行全局自定义指令
• 参数1 ：指令的名称
• 参数2： 是一个对象，这个对象身上，有钩子函数.

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

三、vue路由导航守卫

1. 请简单说一下vue路由的原理？

   Vue的路由实现：hash模式 和 history模式

   • hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；

   • 特点：

     • hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
     • hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

   • history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

   • 特点:

     • history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

2. 路由守卫的钩子函数都有哪些？分别是什么意思？

• vue-router全局有三个守卫：

  • router.beforeEach 全局前置守卫 进入路由之前
  • router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
  • router.afterEach 全局后置钩子 进入路由之后

• 组件内的守卫：

  • beforeRouteEnter
  • beforeRouteUpdata(2.2新增)
  • beforeRouteLeave

3. 路由守卫钩子函数里面的三个参数分别是什么？

• to：即将要进入目标的路由对象
• from：当前导航即将要离开的的路由对象
• next：调用该方法后，才能进入下一个钩子

**作用：**当我们路由切换到一个组件里面，如果没有权限，不让进入，有权限可以进入

四、$router和$route的区别

• $router为vuerouter实例，想要导航不同url，则使用$router.push方法
• $route为当前router跳转对象里面可以获取name，puth，query，params等

五、 vue-router路由传参的方式一共有几种？他们是如何就收传递过来的参数？

• 三种：

  • 分别是query，params，动态路由传参

• 接收：

  • 通过query方式传递过来的参数一般是通过this.$route.query接收
  • 通过params方式传递过来的参数一般是通过this.$route.params接收
  • 通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收

六、为何组件的data必须是一个函数

因为组件是用来复用的，且js里对象是引用关系，

如果组件中的data是一个对象，那么这样作用域没有隔离，子组件中的data属性值会互相影响，

如果组件中data选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的data属性值不会被互相影响；

而new Vue的实例是不会被复用的，因此不存在引用对象的问题

七、vue常用指令

1. v-model 多用于表单元素实现双向数据绑定
2. v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json
3. v-show 显示内容 ,通过display=block/none来控制元素隐藏出现
4. v-hide 隐藏内容 同上
5. v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
6. v-else-if 必须和v-if连用
7. v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
8. v-bind 动态绑定 作用： 及时对页面的数据进行更改
9. v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
10. v-text 解析文本
11. v-html 解析html标签
12. v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
13. v-once 进入页面时 只渲染一次 不在进行渲染
14. v-cloak 防止闪烁 该属性需配合 样式使用：
15. v-pre 把标签内部的元素原位输出

八、v-if与v-show的区别

• 相同点：都可以动态控制着dom元素的显示隐藏

• 区别：v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;

  **`v-show`:** 控制DOM 的显示隐藏是为DOM元素添加css的样式`display`，设置`none`或者是`block`，`DOM元素是还存在的`
  

• 性能对比：v-if有更高的切换消耗；
  v-show有更高的初始渲染消耗

• 使用场景：v-if适合运营条件不大可能改变的场景下；
  v-show适合频繁切换；

九、vue生命周期

1. beforeCreate( 创建前 )此时组件的选项对象还未创建，el 和 data 并未初始化，

   created(创建后)Vue里的数据在内存中已经创建完毕，但是还没有渲染到页面上。

   可做操作：从服务器获取一些初始化的数据，或者通过ajax向服务器发送一些数据

2. beforeMount（挂载前）完成了 el 和 data 初始化

   mounted（挂在后） 数据已经渲染在了浏览器的页面上。

   可做操作：操作DOM节点）

3. beforeDestory（销毁前）一般在这一步做一些重置的操作比如清除掉组件中的定时器
   实例仍然完全可用，，和监听的dom

   destory(销毁后)此时移除定时器或者事件绑定
   （此时状态：奄奄一息。。但是销毁的时候需要手动销毁：）

4. beforeupdated(更新前)虚拟 DOM 重新渲染之前
   ，可以在该钩子中进一步地更改状态

   updated(更新后) 页面发生变化的时候才触发此声明周期函数。

十、vue 双向数据绑定原理

使用v-model来实现

vue双向数据绑定原理，又称vue响应式原理，双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，

第一步：创建一个监听者，Observer，监听属性变化，当属性变化的时候，通知订阅者。

第二步：创建一个订阅者，watcher 用来接收属于变化的通知并且执行相对应的方法，然后更新视图view。

第三部，创建一个解析器，compile ，可以扫描和解析每一个节点相关指令，还可以，初始化模板数据，和初始化相关订阅者

十一、vuex 中 state, getters, mutations, actions, modules, plugins 的用途，和用法

Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一	种可预测的方式发生变化。

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为 state 的计算属性。我们在组件中使用 $sotre.getters.fun()
• mutations ： 修 改 状 态 ， 并 且 是 同 步 的 。 在 组 件 中 使 用$store.commit(’’, params)，这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath(’’)
• modules：store 的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

十二、mvvm和mvc

mvvm

概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

以vue为例：
view 对应 template，vm 对应 new Vue({…})，model 对应 data

MVC模式概要（典型的框架有angular.js）

View：视图层；
Model：业务数据层；
Controller： 控制器。接收View层传递过来的指令，选取Model层对应的数据，进行相应操作。

十三、vue之prop

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。

• prop 数据单项传递，父影响子，子不影响父
• 不能在组件中直接修改 prop 传递过来的值，Vue 会给出警告
• prop 验证时，会在实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的
• 非 prop 特性，组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。

十四、vue2与vue3的区别

总结：

1. vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下

1. defineProperty只能监听某个属性，不能对全对象监听
2. 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
3. 可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

2. 默认进行懒观察（lazy observation）

在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

3. 更精准的变更通知。

比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

4. 3.0 新加入了 TypeScript 以及 PWA 的支持

5.vue2和vue3组件发送改变

十五、keep-alive

• keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
• router-view 也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存

应用场景？

被keep-alive包裹的动态组件会缓存不活动的实例，再次被调用这些被缓存的实例会被再次复用，对于我们的某些不是需要实时更新的页面来说减少了性能上的消耗

十六、 什么是虚拟dom，和 diff 算法

• 虚拟DOM

  它是一个Object对象模型，用来模拟真实dom节点的结构
  作用：用来高效的渲染页面，减少不必要的DOM操作 提高渲染效率

• diff 算法 ：

  diff算法会从根节点开始，一层层的向下比较，如果在某一层的某个节点发现不同了，他就会直接替换这个节点下面的所有子树。
  作用：用来做比对两次vdom结构，

十七、 sessionStorage localStorage cookie 的区别

localStorage 生命周期是永久，这意味着除非用户显示在浏览器提供的UI 上清除 localStorage 信息，否则这些信息将永远存在。

sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除

Cookie就是我们所理解的缓存，本地缓存；

简单来说，为了让服务器记住客户端，服务器会给客户端一串字符串，这串字符串就是cookie。 用于登录时记住密码

十八、axios封装与api接口管理

1. 安装axios

​ npm install axios; // 安装axios复制代码

2. 目录创建
   一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法

3. 环境的切换
   我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址

4. 设置请求超时

通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。

5. post请求头的设置
   post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置
6. 请求拦截

我们在发送请求前可以进行一个请求的拦截，

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。

7. 响应的拦截

   响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理

十九、 require与import的区别和使用(CommonJS规范和es6规范)

1，require是CommonJS规范的模块化语法，import是ECMAScript 6规范的模块化语法；

2，require是运行时加载，import是编译时加载；

3，require可以写在代码的任意位置，import只能写在文件的最顶端且不可在条件语句或函数作用域中使用；

4，require通过module.exports导出的值就不能再变化，import通过export导出的值可以改变；

5；require通过module.exports导出的是exports对象，import通过export导出是指定输出的代码；

6，require运行时才引入模块的属性所以性能相对较低，import编译时引入模块的属性所所以性能稍高。

require的使用

定义模块：module变量代表当前模块，它的exports属性是对外的接口。通过exports可以将模块从模块中导出，其他文件加载该模块实际上就是读取module.exports变量，他们可以是变量、函数、对象等。在node中如果用exports进行导出的话系统会系统帮您转成module.exports的，只是导出需要定义导出名。

import的使用

定义模块：在模块中可以使用export关键字可以将变量、对象、函数、类等从模块中导出，再通过import语句就可以使用它们。一个模块中只能有一个默认导出export defaultX，但是可以有多个export导出。

二十、 Vue 中 methods, computed, watch 的区别

• methods 中都是封装好的函数，无论是否有变化只要触发就会执行
  适用场景：组件中功能的封装，逻辑处理

• computed: 是 vue 的计算属性，可以对 data 中的依赖项再重新计算得到一个新值应用到视图中
  适用场景： 购物车商品结算的时候

• Watch 是监听 data 和计算属性中的新旧变化
  适用场景：当一条数据影响多条数据的时候就需要用watch搜索数据

Es6篇

---

、、、、、、

网络相关

---

一、常见的状态码有哪些？

①　200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；
②　404：(客户端问题)请求的资源没有找到 400: 语义有误，当前请求无法被服务器理解。401: 当前请求需要用户验证 403: 服务器已经理解请求，但是拒绝执行它。
③　500：(服务端问题)请求资源找到了，但服务器内部发生了不可预期的错误；
④　301/302/303：(网站搬家了，跳转)重定向
⑤　304: Not Modified,代表上次的文档已经被缓存了,还可以继续使用。如果你不想使用本地缓存可以用Ctrl+F5 强制刷新页面

二、HTTP与HTTPS的区别？

1、HTTP是超文本传输协议，信息是明文传输，HTTPS是具有安全性的SSL加密传输协议。

2、HTTPS协议需要ca申请证书，一般免费证书少，因而需要一定费用。

3、HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样。前者是80，后者是443。

4、HTTP连接是无状态的，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，安全性高于HTTP协议。