VUE知识点

一、vue的生命周期

初始化:css

beforeCreate:通常没啥用,数据没挂载,DOM 没有渲染出来html

created:数据已经挂载,可是 DOM 没有渲染出来,这个钩子函数里面能够作一些异步的操做,而且在这个钩子函数里面更改数据不会影响到运行时钩子函数。前端

beforeMounte:这个函数表明着 DOM 快要被渲染出来了,可是尚未被渲染出来,跟 created 同样,作一些异步的操做vue

mounted:数据已经挂载,真实 DOM 也已经渲染出来了。java

运行中:node

beforeUpdate:当数据改变的时候才会执行这个函数,在这个函数里面拿到的是改变以前的数据,千万不能在这个里面更改数据,不然会形成死循环ios

updated:拿到的是更新以后的数据,在这函数里面,生成新的 DOM ,跟上一次的虚拟 DOM 作对比,比较出差别以后,而后再渲染真实的 DOM ,当数据引起 DOM 从新渲染的时候,在这个钩子函数里面就能够获取到真实的 DOM。es6

销毁时:算法

beforeDestroy:销毁前,作一些善后的操做vue-router

destroyed:数据的双向绑定,监听都删除了,可是真实的 DOM 仍是存在的

二、什么是 MVVM?与 MVM 的区别。

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

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

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

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

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

三、完整的生命周期函数究竟是什么?

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

created:数据能够获取,而且在钩子函数中更改数据不会调用钩子函数的执行

beforeMount:此时尚未生成 html 到页面中。

mounted:初始化阶段最后一个钩子函数,能够操做真实 DOM 了

数据更新的时候,先调用 beforeUpdate,而后数据更新引起视图渲染完成以后,才会执行 updated

四、VUE 中如何封装组件?什么组件,为何要封装组件?组件中 data 为何是一个函数?

为何要封装组件?

主要就是为了解耦,提升代码复用率。

什么是组件?

页面上能够复用的都称之为组件

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

组件就至关于库,把一些能在项目里或者不一样项目里能够复用的代码进行需求性的封装。

组件中的 data 为何是一个函数

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

(延申)

什么是模块?

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

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

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

五、axios 是什么?

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

axios 支持并发请求,能够同时请求多个接口

axios 提供了拦截器。

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

axios 拦截器:

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

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

response 相应拦截:是根据响应的代码来进行下一步的操做。例如:因为当前的 token 过时,接口返回 401 未受权。那么咱们就要跳转到登录界面

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

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

六、VUEX 是什么?怎么使用?那种场合能用?

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

vuex 的核心包括:state(存放状态)、mutations(同步的更改状态)、actions(发送异步请求,拿到数据)、getters(根据以前的状态派发新的状态)、modules(模块划分)

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

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

七、vue 的指令用法

v-if  条件渲染指令

v-bind  绑定属性指令

v-on  监听事件指令

v-for  循环渲染指令

v-text  渲染文本

八、导航钩子?

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:路由信息对象,只读对象

九、v-model 是什么?

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

有两个操做:

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

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

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

主要是由于 swiper 提早初始化了 ,可是数据尚未彻底出来。

this.$nextTick() 主要做用就是等数据改变引起 DOM 从新渲染完成以后才会执行。

十一、keep-alive

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

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

路由懒加载:

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

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

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

十二、单页应用

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

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

优势:良好的交互体验、良好的先后端工做分离模式、减轻服务器的压力、公用一套后端程序代码

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

1三、什么是vue-loader?

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

为何要转译此模块?

能够动态的渲染一些数据,对三个标签作了优化

template 写虚拟 DOM

script 写 es6 语法

style 默承认以用 scss 语法,提供了做用域

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

1四、slot 是什么?如何使用?

插槽:具名插槽、匿名插槽、做用域插槽

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

1五、什么是虚拟 DOM ?与 key 值得关系?

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

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

虚拟 dom 的缺点:

一、代码更多,体积更大

二、内存占用增大

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

1六、如何理解 vue 的 mvvm 框架?

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

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

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

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

数据双向绑定:

当视图改变动新模型层,当模型层改变动新视图

vue 的数据双向绑定:

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

1七、active-class 是哪一个组件的属性。

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

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

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

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

1八、scss 是什么?

scss 是一种预编译器。

1九、vue 的第三方插件:

miui-ui element-ui vuex

20、axios 是什么?

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

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

post:方法基本与 get 方法一致,可是须要设置请求头。

2一、promise 的了解

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

2二、自定义指令的方法:

vue.directive

钩子:bind、inserted、update、unbind

参数:el、binding、vnode

2三、vue 之间的通讯

父子:子组件用 props,接受父组件传递过来的值

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

兄弟之间传值:

ref 链:父组件要给子组件传值,在子组件上定义一个 ref 属性,这样经过父组件的 $refs 属性就能够获取子组件的值了,也能够进行父子,兄弟之间的传值

even.bus 事件总线:简单的场景下,使用一个 空的 VUE 实例做为事件总线,能够实现兄弟之间的通讯。

2四、异步函数

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

2五、VUE 路由之间的传值

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

使用name来肯定匹配的路由,经过params来传递参数

使用path来匹配路由,而后经过query来传递参数

2六、模块化开发

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

好处:

一、避免了变量污染,命名冲突

二、提升代码复用率

三、提升维护性

四、依赖关系的管理

2七、vue 的计算属性

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

好处

一、是数据处理结构清晰

二、依赖于数据,数据更新,处理结果自动更新,

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

四、在 template 调用时,直接写计算属性姓名便可

五、经常使用的是 getter 方法,获取数据,也可使用 set方法改变数据,

六、相较于methods,无论依赖的数据变不变,methods都会从新计算,可是依赖数据不变的时候conputed从缓存中获取,不会从新计算,