一、Vuex有几种属性,他们存在的意义分别是什么?
有五种,分别是 State,Getter,Mutation,Action,Module
State:
Vuex中使用单一状态树——用一个对象包含了全部的应用层级状态。至此它便作为唯一数据源(SSOT)而存在,这也意味着,每个应用仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前的应用状态。
State属性是Vuex的单一状态树
Getter:
有时候我们需要从store中的state中派生出一些状态,例如对列表进行过滤并计数
Getter类似于Vue的computed对象。是根据业务逻辑来处理State,所得得生成业务所需的属性。
Mutation:
更改Vuex的store中的状态的唯一方法是提交 mutation。
Vuex中的mutation类似于时间:每个mutation都有一个字符串的 事件类型(type) 和一个回调函数(handler)
Mutation是唯一用来更改Vuex中状态的方法
Action:
Action类似于mutation,不同在于:
- Action提交的是mutation,而不是直接更改状态。
- Action可以包含任意异步操作。
Module:
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store对象就会有可能变得相当臃肿。为了解决以上问题,Vuex允许我们将store分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块—从上至下进行同样的方式进行分割
Module是将Vue模块化的对象,目的是更好的维护
二、ajax,axios,fetch有什么区别?
(1)AJAX
Ajax即“asynchronousJavascriptAndXML”(异步Javascript和XML),是指一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用ajax)如果需要更新内容,需要重新加载整个网页,其缺点为:
- 本身是针对MVC编程,不符合前端MVVM的浪潮
- 基于原生XHR开发,XHR本身的架构不清晰
- 不符合关注分离(Separation of Concerns)的原则
- 配置和调用方式非常混乱,而且基于事件的异步模型不友好
(2)Fetch
fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多。fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest的对象。
fetch的优点:
- 语法简洁,更加语义化
- 基于标准Promise实现,支持async/await
- 更加底层,提供的API丰富(request,response)
- 脱离了XHR,是ES规范里新的实现方式
fetch的缺点:
- fetch只对网络请求报错,对400,500都当做成功的请求,服务器返回400,500错误码时并不会reject,只有网络错误这些导致请求不能完成时,fetch才会被reject。
- fetch默认不会带cookie,需要添加配置项:fetch(url,{credentials:'include'})
- fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现超时控制并不能阻止请求过程继续在后台运行,造成流量的浪费
- fetch没有办法原生监控请求的进度,而XHR可以
(3)Axios
Axios是一种基于Promise封装的HTTP客户端,其特点如下:
- 浏览器端发起XMLHttpRequests请求
- node端发起http请求
- 支持Promise API
- 监听请求和返回
- 对请求和返回进行转化
- 取消请求
- 自动转换json数据
- 客户端支持抵御XSRF攻击
三、元素竖向的百分比设定是相对于容器的高度吗?
当按照百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如:padding-top,padding-bottom,margin-top,margin-bottom等。当按照百分比设定它们时,依据的也是父容器的宽度,而不是高度。