面试题
1 vuex的五个状态
vue组件的可变化
VueX是一个专门为 Vue.js应用设计的状态管理架构,统一管理和维护各个 状态(你可以理解成 vue组件里的某些 data )。Vue 有五个核心概念, state, getters, mutations, actions, modules 。
state => the artist基本数据 ==data
getters =>从基本数据派生的数据 ==computed
mutations =>提交更改数据的方法, 同步! ==methods
actio ns =>像一个装饰器,包裹 mutatio ns,使之可以异步。
modules => 模块化 Vuex
2 vue周期(钩子函数) created可获取数据 Mounted可操作DOM
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲
染t更新t渲染、销毁等一系列过程,我们称这是 Vue的生命周期。通俗说就是 Vue实例从创建到
销毁的过程,就是生命周期。
分为三个阶段:初始化、运行中、销毁。
beforeCreate :实例、组件通过new Vue()创建出来之后会初始化事件和生命周期,然后就会执 行beforeCreate钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实 的dom,一般不做操作
Created:挂载数据,绑定事件等等,然后执行 created函数,这个时候已经可以使用到数据,也
可以更改数据,在这里更改数据不会触发 updated函数,在这里可以在渲染前倒数第二次更改数据的
机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取
beforeMount :接下来开始找实例或者组件对应的模板,编译模板为虚拟 dom放入到render函
数中准备渲染,然后执行 beforeMount钩子函数,在这个函数中虚拟 dom已经创建完成,马上就要
渲染,在这里也可以更改数据,不会触发 updated,在这里可以在渲染前最后一次更改数据的机会,
subscribe是什么意思不会触发其他的钩子函数,一般可以在这里做初始数据的获取
Mounted :接下来开始render,渲染出真实 dom,然后执行 mounted钩子函数,此时,组件已 经出现在页面中, 数据、真实dom都已经处理好了,事件都已经挂载好了, 可以在这里操作真实 dom
等事情…
beforeUpdate :当组件或实例的数据更改之后, 会立即执行beforeUpdate ,然后vue的虚拟dom 机制会重新构建虚拟 dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染, 一般不做什 么事儿
Update当更新完成后,执行 updated,数据已经更改完成,dom也重新render完成,可以操
作更新后的虚拟 dom
beforeDestroy :当经过某种途径调用 $destroy方法后,立即执行beforeDestroy , 一般在这里做一 些善后工作,例如清除计时器、清除非指令绑定的事件等等
Destroyed :组件的数据绑定、监听 …去掉后只剩下dom空壳,这个时候,执行 destroyed,在这 里做善后工作也可以
钩子函数的的实际应用
beforecreate :举个栗子:可以在这加个 loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
兵马俑 英文mounted :在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestroy :你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容
3cookie、localstroge、localSeesion 的区另
共同点:都是保存在浏览器端,且同源的。
区别:安全性、大小、有效期、作用域
1 cookie数据始终在同源的http请求中携带(即使不需要),即 cookie在浏览器和服务器间来
回传递。而ssionStorage和localstorage不会自动把数据发给服务器,仅在本地保存。 cookie数据 还有路径(path)的概念,可以限制 cookienequal只属于某个路径下。
2存储大小限制也不同, cookie数据不能超过4k,同时因为每次 http2016年高考日期请求都会携带cookie,所
以cookie只适合保存很小的数据,如会话标识。 ssionStorage和localstorage虽然也有存储大小的
限制,但比cookie大得多,可以达到 5M或更大。
3数据有效期不同,ssionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保 持;localstorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据; cookie只在设置
的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
4作用域不同,ssi on Storage不在不同的浏览器窗口中共享, 即使是同一个页面;localStorage在
所有同源窗口中都是共享的; cookie也是在所有同源窗口中都是共享的。
4get和postimfill区别
get参数通过 url传递,post放在request body中。 传递路径
get请求在url中传递的参数是有长度限制的,而 post没有。 长度限制
get比post更不安全,因为参数直接暴露在 不给糖就捣蛋英语url中,所以不能用来传递敏感信息。 安全
get请求只能进行url编码,而post支持多种编码方式 编码方式
get请求会浏览器主动 cache,而post支持多种编码方式。
get请求参数会被完整保留在浏览历史记录里,而 post中的参数不会被保留。 保存
GET和POST本质上都是TCP链接,并无差别。但是由于 HTTP的规定和浏览器/服务器的限制,
导致他们在应用过程中体现出一些不同。zqh
5你是如何操持登录
1利用Token实现
APP登录成功后,服务器以某种方式,如随机生成 N位的字符串作为Token,同时设置一个有效
期,存储到服务器中,并返回 Token给APP。
后续APP发送请求时,都要带上该Token,每次服务器端收到请求时, 都要验证Token和有效期,
Token数值对且在有效期内,服务器返回所需要的结果,否则返回错误信息,提示用户重新登录。
(这种方式目前使用的最多)
2 利用 Cookie 实现
APP登录成功后,服务器创建一个包含 ssion_id和Expires两个属性值的Cookie,存储在服务
器中,并发送给 APP。
后续APP发送请求时,都要带上一个包含此 ssion_id的Cookie,每次服务器端收到请求时,
都要验证 ssion_id 和有效期, ssion_id 数值对且在有效期内,服务器返回所需要的结果,否则返 回错误信息,提示用户重新登录。
6vue怎么实现双向数据绑定
vue数据双向绑定是通过数据劫持结合发布者 -订阅者模式的方式来实现的。其实主要是用了 Es5
中的Object.defineProperty ;来劫持每个属性的 getter,和tter。这也正是 Vue不兼容IE8以下的原因。
发布者-订阅者模式: 订阅是请求在某些事件 (event)到达时可以通知它并执行对应的动作
(actio n),而发布则相对的是向订阅告知事件 (eve nt)已经到达,你可以执行对应的动作 (actio n) 了。
7promi的简述
Promi是异步编程的一种解决方案,通俗的来讲 Promi是一个许诺、承诺,是对未来事情的 承诺,承诺不一定能完成,但是无论是否能完成都会有一个结果。
应用场景
1解决回调地狱比如我们经常可能需要异步请求一个数据之后作为下一个异步操作的入参
2 promi可以实现在多个请求发送完成后 再得到或者处理某个结果
最简单的实现
基于上面的应用场景发现 promi可以有三种状态,分别是 pending、Fulfilled、Rejected。
Pending Promi对象实例创建时候的初始状态
Fulfilled持续改善可以理解为成功的状态
Rejected可以理解为失败的状态
构造一个Promi实例需要给Promi构造函数传入一个函数。 传入的函数需要有两个形参,
两个形参都是function类型的参数。分别是 resolve和pctireject。
Promi上还有then方法,then方法就是用来指定 Promi对象的状态改变时确定执行的
操作,resolve时执行第一个函数(onF ulfilled), reject时执行第二个函数(on Rejected) 当状态变为resolve时便不能再变为reject,反之同理。
基本api
(1)new Promi
(2)PromiObj.the n(resolve Fn ‘reject Fn)