VUE知识点

1、vue的生命周期

初始化：

beforeCreate：一般没啥用，数据没挂载，DOM 没有渲染出来

created：数据已经挂载，但是 DOM 没有渲染出来，这个钩子函数里面可以做一些异步的操作，并且在这个钩子函数里面更改数据不会影响到运行时钩子函数。

beforeMounte：这个函数代表着 DOM 快要被渲染出来了，但是还没有被渲染出来，跟 created 一样，做一些异步的操作

mounted：数据已经挂载，真实 DOM 也已经渲染出来了。

运行中：

beforeUpdate：当数据改变的时候才会执行这个函数，在这个函数里面拿到的是改变之前的数据，千万不能在这个里面更改数据，否则会造成死循环

updated：拿到的是更新之后的数据，在这函数里面，生成新的 DOM ，跟上一次的虚拟 DOM 做对比，比较出差异之后，然后再渲染真实的 DOM ，当数据引发 DOM 重新渲染的时候，在这个钩子函数里面就可以获取到真实的 DOM。

销毁时：

beforeDestroy：销毁前，做一些善后的操作

destroyed：数据的双向绑定，监听都删除了，但是真实的 DOM 还是存在的

2、什么是 MVVM？与 MVM 的区别。

mvvm 是一种简化用户界面的事件驱动编程方式

View是视图层，也是用户交互层，主要是由 html 和 css 构建

Model是视图层，泛指后端进行的各种逻辑处理和数据操控

ViewModel是指视图数据层，在这一层，前端开发者对从后端获取到的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。

MVVM 主要是解决 MVM 的反馈不即使的问题。

3、完整的生命周期函数到底是什么？

beforeCreate：基本什么都干不了，data 没有注入到 vue 里面，获取不到 data 信息，做一些预处理功能，

created：数据可以获取，并且在钩子函数中更改数据不会调用钩子函数的执行

beforeMount：此时还没有生成 html 到页面中。

mounted：初始化阶段最后一个钩子函数，可以操作真实 DOM 了

数据更新的时候，先调用 beforeUpdate，然后数据更新引发视图渲染完成之后，才会执行 updated

4、VUE 中如何封装组件？什么组件，为什么要封装组件？组件中 data 为什么是一个函数？

为什么要封装组件？

主要就是为了解耦，提高代码复用率。

什么是组件？

页面上可以复用的都称之为组件

它是 HTML、CSS、JS 的聚合体。

组件就相当于库，把一些能在项目里或者不同项目里可以复用的代码进行需求性的封装。

组件中的 data 为什么是一个函数

让每个返回的实例都可以维护一份被返回对象的独立的拷贝。

（延申）

什么是模块？

相当于业务逻辑块，把同一类的项目里的功能逻辑进行需求性的封装。

模块化开发：就是将 js 文件按照功能分离，根据需求引入不同的文件，源于服务端

组件化开发：具备单个可移植性，即“随用随加载”，不需要为其准备复杂的基础条件，组件是声明式，非命令式

5、axios 是什么？

axios 主要是用来向后台发送请求。支持promise

axios 支持并发请求，可以同时请求多个接口

axios 提供了拦截器。

axios 可以防止 跨站请求伪造。也就是钓鱼网站

axios 拦截器：

分为 request 请求拦截和 response 响应拦截

request 请求拦截：发送请求前统一处理。例如：设置请求头 headers

response 相应拦截：是根据响应的代码来进行下一步的操作。例如：由于当前的 token 过期，接口返回 401 未授权。那么我们就要跳转到登陆界面

axios/fetch 是基于 promise。后者主要利用 callback 的形式

fetch 脱离了 xhr，是新的语法，默认不传 cookie。另外也监听不到请求进度

6、VUEX 是什么？怎么使用？那种场合能用？

vuex 是一个专门为 vue 构建的状态管理工具，主要是为了解决 多组间之间状态共享问题。强调的是集中式管理，（组件与组件之间的关系变成了组件与仓库之间的关系）

vuex 的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求，拿到数据）、getters（根据之前的状态派发新的状态）、modules（模块划分）

state 发布一条新的数据，在 getters 里面根据状态派发新的状态，actions 发送异步请求获取数据，然后在 mutations 里面同步的更改数据

应用场合：购物车的数据共享、登入注册

7、vue 的指令用法

v-if　　条件渲染指令

v-bind　　绑定属性指令

v-on　　监听事件指令

v-for　　循环渲染指令

v-text　　渲染文本

8、导航钩子？

vur-router

spa 单页面应用：指的是根据检测地址栏的变化将对应的路由组建进行切换

也就是说，一个项目里面只有一个完整的 HTML 页面。其余的都是 HTML 组件，页面之间跳转刷新，都是组件之间切换，减少了 http 请求的发送，提高了用户体验，

原理就是 js 感知到 url 的变化，通过这一点，可以用 js 动态的将当前页面内容清除，然后将下一个页面的内容挂载到当前页面上，这个时候路由不是后端做，而是前端完成，判断到底是显示哪个页面，清除不需要的，显示需要的，这个过程就是单页面应用。

好处就是:良好的交互体验，良好的前后端分离模式，减轻了服务器的压力，公用一套代码。

history hash

声明式导航：router-link

history：这个模式会直接改变 url 地址，需要后端给我们配置。

hash：这个模式检测到 url 地址栏 # 后面的路径标识符的更改，从而触发浏览器的 hashchange 事件，然后通过 location.hash 得到当前的路径标识符，在进行路由跳转操作。

一级路由、二级路由？ children

路由跳转、两种方式：router-link to this.$router.push()

路由守卫 拦截器

​ 拦截器：request请求拦截器和response响应拦截器

request 请求拦截：发送请求前同一处理，

例如：设置请求头 headers、应用的版本号、终端类型等

response 响应式拦截：有时候我们要根据响应式的状态来进行下一步操作，

例如：由于当前的 token 过期，接口返回 401 未授权，我们就需要进行重新登录的操作。

导航钩子就是 vue 中路由 vue-router

​ 分类：

​ beforeEach 在路由切换开始的时候调用

​ afterEach 在路由切换离开的时候调用

​ 局部到单个路由

​ beforeEnter

​ 组件的钩子函数

​ beforeRouterEnter

​ beforeRouterUpdata

​ beforeRouteLeave

​ 三个参数：

​ to 即将进入的目标对象

​ from 导航要离开的导航对象

​ next 是一个函数，调用 resolve 执行下一步

​ $router：是路由操作对象，只写对象

​ $route：路由信息对象，只读对象

9、v-model 是什么？

用于表单的数据双向绑定的指令

有两个操作：

1、v-bind 绑定了一个 value 的属性

2、v-on 把当前元素绑定到一个事件上

10、swiper 插件从后台获取数据没有问题，css 代码啥的也没有问题，但是图片没动，怎么解决。

主要是因为 swiper 提前初始化了 ，但是数据还没有完全出来。

this.$nextTick() 主要作用就是等数据改变引发 DOM 重新渲染完成之后才会执行。

11、keep-alive

当在这些组件之间切换的时候，想保持这么组建的状态，以避免反复渲染导致的性能问题

原理：在 created 的时候，将需要缓存的虚拟 DOM 节点放到 cache 中，在 reader 的时候根据 name 再进行取出。

路由懒加载：

就是当你需要的时候才会加载，按需加载。

单页面应用的问题就是所有的页面都需要引入一个 js 文件，wepback 打包的时候生成一个 js ，这个 js 会再所有组件切换的时候调用

单页引入了所有的一个 js ，日志也会引入所有的一个 js ，这样首页加载速度变慢。解决方法就是路由懒加载。

12、单页应用

原理就是通过检测地址栏的变化将对应路由组件进行组件之间的切换。

一个项目只有一个完整的 html 页面，其他部分都是 html 组件组成，页面的跳转只是局部的刷新，不会重新加载全部的资源，组件之间的之间的切换快，比较容易实现转场动画。页面每次跳转时候，并不需要做 html 文件请求，这样就节约了很多 http 发送请求，我们的切换页面的时候，速度会很快。

优点：良好的交互体验、良好的前后端工作分离模式、减轻服务器的压力、公用一套后端程序代码

缺点：SEO 难度较大、页面上不能进行前进后退管理、初次加载耗时多。

13、什么是vue-loader？

vue-loder 就是一个加载器，把 vue 组件转换成 js 模式。

为什么要转译此模块？

可以动态的渲染一些数据，对三个标签做了优化

template 写虚拟 DOM

script 写 es6 语法

style 默认可以用 scss 语法，提供了作用域

并且开发阶段提供了热加载器

14、slot 是什么？如何使用？

插槽：具名插槽、匿名插槽、作用域插槽

在引用子组件开始标签和结束标签之间，插入一个任意一个元素，用 slot 标签包裹一下，在父组件调用子组件的时候，这个插槽就会插入到子组件对应的具名插槽的位置。slot 有一个 name 属性，加 name 属性就是具名插槽，不加就是匿名插槽。

15、什么是虚拟 DOM ？与 key 值得关系？

DOM 是用 js 对象记录一个 dom 节点得副本，当 dom 发生更改的时候，先用虚拟 dom 进行 diff 算法，算出最小差异，然后再修改真实 dom。

当用传统得方式操作 DOM 得时候，浏览器会从构建 DOM 树开始从头到尾执行一边流程，效率很低，而虚拟 DOM 是用 javascrit 对象表示的，而操作 javascriot 是很简便高效的。虚拟 dom 和真实的 dom 有一层映射关系，很多需要操作 dom 的地方都会去操作虚拟 dom ，最后一次更新 dom，因而可以提高性能。

虚拟 dom 的缺点：

1、代码更多，体积更大

2、内存占用增大

3、小量的单一的 DOM 修改使用 虚拟 DOM 成本反而更高，不如直接修改真实 dom 快

16、如何理解 vue 的 mvvm 框架？

是一种简化用户界面的事件驱动编程方程式。

view 层是视图层，使用户交互层，主要是 HTML 和 CSS 来构建

moedl 层数据模型层，泛指后端进行的各种逻辑处理和数据操控

viewmodel 层是指视图数据层。在这一层，前端开发者对从后端获取的 model 数据进行转换处理，做二次封装，以生成符合 view 层使用预期的视图数据模型。

数据双向绑定：

当视图改变更新模型层，当模型层改变更新视图

vue 的数据双向绑定：

vue 采用数据劫持&订阅者发布模式的方法：vue 在创建 vm 的时候，会将数配置在实例中，然后会使用 object.defineproperty 对这些数据进行处理，并且会将数据进行处理，并且会为这些数据添加 getter 与 setter 方法，当数据改变之后，就会触发数据的 setter 方法，从而触发 vm 的 watcher 方法，然后数据改变了， vm 进一步渲染 view 视图。

17、active-class 是哪个组件的属性。

vue-router 模块提供的 router-link 组件的属性

在 vue-router 中要使用 active-class 有两种方式

1、直接在路由 js 文件中配置 linkActiveClass

2、在 router-link 中写入 active-class

18、scss 是什么？

scss 是一种预编译器。

19、vue 的第三方插件：

miui-ui element-ui vuex

20、axios 是什么？

axios 是用来发送请求的。get 和 post 两种

get：通过定义一个 get 函数，他有两个参数，第一个参数就表示我们请求的 url 地址，第二个参数就是我们要携带的请求参数，get 函数返回的是一个 promise 对象，当axios 请求成功的时候服务器返回给我们的是 reslove 返回值，请求错误的时候返回给我们的是 reject 错误值，最后通过 export 抛出 get 函数

post：方法基本与 get 方法一致，但是需要设置请求头。

21、promise 的了解

promise 是异步函数的解决方案，从语法上讲 promise 是一个对象，从他可以获取异步操作的消息， promise 有三个状态，pending 等待状态、fulfilled 成功状态、rejected 失败状态，状态一旦更改，就不会在变，创造出 promise 实例后，他会立刻执行，promise 有两个API 方法：resolve 和 reject，resolve 代表的是回调成功后的函数，reject 代表的是失败后返回的结果，原型上有两个放法：.then 和 .catch 方法，例如请求接口 .then 拿到的是数据，通过 .catch 捕获错误异常

22、自定义指令的方法：

vue.directive

钩子：bind、inserted、update、unbind

参数：el、binding、vnode

23、vue 之间的通信

父子：子组件用 props，接受父组件传递过来的值

子父：父组件声明一条数据，再写一个改变自身的方法，传递给子组件，然后把子组件添加到点击事件上

兄弟之间传值：

ref 链：父组件要给子组件传值，在子组件上定义一个 ref 属性，这样通过父组件的 $refs 属性就可以获取子组件的值了，也可以进行父子，兄弟之间的传值

even.bus 事件总线：简单的场景下，使用一个 空的 VUE 实例作为事件总线，可以实现兄弟之间的通信。

24、异步函数

async　　await

async 函数的返回值是一个 Promise 对象。当这个 async 函数返回一个值时，Promise的 resolve 方法会负责传递这个值（相当于Promise.resolve(value)）；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值（相当于Promise.reject(value)）。

async 函数中可能会有 await 表达式，await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其处理结果作为 await 表达式的值，继续执行 async function

25、VUE 路由之间的传值

使用$router.push 拼接参数传参

使用name来确定匹配的路由，通过params来传递参数

使用path来匹配路由，然后通过query来传递参数

26、模块化开发

一个模块就是实现特定功能的文件

好处：

1、避免了变量污染，命名冲突

2、提高代码复用率

3、提高维护性

4、依赖关系的管理

27、vue 的计算属性

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采用计算属性的方法

好处

1、是数据处理结构清晰

2、依赖于数据，数据更新，处理结果自动更新，

3、计算属性内部 this 指向vm实例

4、在 template 调用时，直接写计算属性姓名即可

5、常用的是 getter 方法，获取数据，也可以使用 set方法改变数据，

6、相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候conputed从缓存中获取，不会重新计算，