vue理论

1. 路由守卫分类

   1. 守卫：beforeEach （to，from， next）
   2. 后置守卫：afterEach （to，from）
   3. 全局解析守卫：beforeResolve （to，from， next）
   4. 路由独享守卫：beforeEnter （to，from， next）

   5. 组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

2. 简述 Vuex 配置对象中的主要内容有哪些

   Actions :用来定义事件处理方法 处理state数据

   Mutations：选项中的事件处理方法接受state对象作为参数 初始数据

   Getters：计算属性 类似于vue中的实例computed

   Modules:用来在store实例中定义模块对象

   Plugins：vuex中插件配置选项为plugins插件本身为函数

   Devtools：vuex中用来调试

3. 如何理解组件化开发、模块化开发、工程化开发

组件化

把重复的代码提取出来合并成为一个个组件，组件最重要的就是复用，位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。组件化更多关注UI部分，每个组件有独立的HTML、css、js代码。可以根据需要把它放在页面的任意部位，也可以和其他组件一起形成新的组件。一个页面是各个组件的结合，可以根据需要进行组装。

模块化

分属同一功能/业务的代码进行分装，让它成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。侧重功能的封装，主要是针对Js代码，隔离、组织复制的js代码，将它封装成一个个具有特定功能的的模块。模块可以通过传递参数的不同修改这个功能的的相关配置，每个模块都是一个单独的作用域，根据需要调用。一个模块的实现可以依赖其它模块。

工程化

前端工程化不是具体的某项技术和方法，只要我们引入的方法、技术方案、工具可以提升开发效率、提高前端应用质量，那么都属于前端工程化。前端工程化就是通过一系列的工具、方法、工程化的思维，将成千上万个模块、组件或其他静态资源进行有序、规范、标准化、可控、可追踪的组织起来，作为一个整体运行，以便提高前端工程的性能、稳定性、可用性、可维护性等。

• Vue组件之间通信方式有哪些？并说明实现方式

        方法一：Props/$emit 父组件通过props传递给子组件

        子组件通过$emit传递给父组件

        方法二：eventBus.js 非父子传递$emit/$on  

        var Event=new Vue();

        Event.$emit(事件名,数据);

        Event.$on(事件名,data => {});

        方法三:localStorage本地存储

        方法四：通过ref调用  $refs.name接收

        方法五：$parent/$children

5.vue生命周期函数有哪些？分别表示什么含义

6.vue中的样式绑定方式有几种？并说明实现方式

:class   绑定对象 <div :class=”{active:true}”>text</div> <div :class=”active”>text</div>

绑定数组<div :class=”[active]”>text</div>

:style     <div :style=”active”>text</div>

 7.简述vuex完整的的执行流程

通过dispatch提交一个actions, actions接收到事件后 执行一些异步代码或者同步操作，根据不同的情况分发给不同的mountions moutions去更新state数据 state数据更新后 就会通过vue进行渲染

8. 前端路由和后端路由有什么区别

前端路由 不向后台发送数据，不刷新页面 前后端分离

后端路由 向服务器发送请求，会刷新页面 前后端不分离

9.vue中的data为什么要写成一个函数

同一个组件被复用多次会创建多个实例，Vue组件是用来复用的 为了防止data复用 将其定义为函数

10.谈一下对 vuex 的个人理解

        vuex就是一个专门用来管理 vue 组件之间进行通信的一个管理工具，也就是一个全局管理工具，比如你在 state 中定义了一个属性，那么你就可以在所用的组件中来获取和修改这个值并且你的修改可以被全局响应变更

11.Vuex 页面刷新数据丢失怎么解决

本地存储一份

页面刷新重发请求

 12.vue-router路由跳转方式有哪些

第一种方式：router-link （声明式路由）

第二种方式：router.push (编程式路由)

第三种方式：this.$router.push () (函数里面调用)

第四种方式：this.$router.replace () (用法同上,push)

第五种方式：this.$router.go (n)

• Vue-router组件传参方式有哪些？如何接收参数？

​
{
path: ‘/describe/:id’,
name: ‘Describe’,
component: Describe
}

this.$router.push({ // 这个id是一个变量,随便是什么值都可以 path: /describe/${id}`, })

this.$router.push({ name: 'Describe', params: { id: id } })

this.$router.push({ path: '/detail', query: { name: '张三'， id: 1, } })

​

• 什么情况下使用 Vuex？

  • 1. 当一个组件需要多次派发事件时。例如购物车数量加减。
    2. 跨组件共享数据、跨页面共享数据。例如订单状态更新。
    3. 需要持久化的数据。例如登录后用户的信息。
    4. 当您需要开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好地在组件外部管理状态时

• 请说出vue.cli项目中src目录每个文件夹和文件的用法

  1.  assets 文件夹是放静态资源
  2. components 文件夹是放全局组件的
  3.  router 文件夹是定义路由相关的配置
  4.  store 文件夹是管理 vuex管理数据的位置 模块化开发 全局getters
  5.  views 视图 所有页面 路由级别的组件
  6.  App.vue 入口页面 根组件
  7. 7main.js 入口文件 加载组件 初始化等

• 嵌套路由怎么定义

  1. 新建项目，引入vue和vue-router；2.使用Vue.use方法注册路由；3.引入组件；4.使用const routes语句定义嵌套路由；

• vue-router有哪几种导航钩子

  1. 全局守卫、路由守卫、组件守卫。

• 第一次页面加载会触发哪几个生命周期

  1. beforeCreate, created, beforeMount, mounted

• vue生命周期的作用是什么

  1. 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。 同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会

•  说一说封装vue组件的过程

  • 首先，使用Vue.extend()创建一个组件
  • 然后，使用Vue.component()方法注册组件
  • 接着，如果子组件需要数据，可以在props中接受定义
  • 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

• 本地存储有几种方式？ 区别是什么？

  • localStorage       没有时间限制,永不过期,除非主动删除,数据可跨越窗口使用,无视当前会话

  • sessionStorage    在任何页面都可以存储信息,但是仅仅在当前页面有用,每个页面存储的信息都是独立拥有的,其他页面不能访问,一旦当前页面关闭,存储的信息全部删除

  • Cookies          存储量小,存储麻烦,没有固定的API,需要后台帮忙设置,操作麻烦,不安全,费流量