面试

最新推荐文章于 2024-01-20 20:06:43 发布

xiaochouniu1

最新推荐文章于 2024-01-20 20:06:43 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/xiaochouniu1/article/details/103683638

版权

一. axios 请求

1.1 执行 GET 请求

为特定的ID 的user 创建请求
axios.get ( ' /user ? ID = 12345 ' ) 
.then(function (error ){ console.log(erroe) }	   //成功
.catch (function (error ){  console.log(error)}	//失败
另外的做法
axios.get ('/user',{
	parans : {
		ID : 12345
	}
})
.then(function (error ){ console.log(erroe) }	   //成功
.catch (function (error ){  console.log(error)}	//失败

1.2 执行 POST 请求

axios.post('/user',{
	firstName : 'Fred',
	lastName : 'Flintstone'
})
.then(function (error ){ console.log(erroe) }	   //成功
.catch (function (error ){  console.log(error)}	//失败

1.3 发送POST 请求

axios({
	method:'post',
	url:'/user/1234',
	data : {
		firstName : 'Fred',
		lastName : 'Flintstone'
	}
})

1.4 类get 请求

axios.get( 'url , config ')
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])

1.5 类post 请求

axios.post('url' ,{ 对象 } )
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

1.6 响应结构

某个请求的响应包含以下信息

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

   // `config` 是为请求提供的配置信息
  config: {},
  / 'request'
  / `request` is the request that generated this response
	  / It is the last ClientRequest instance in node.js (in redirects) 
	  /and an XMLHttpRequest instance the browser  
	  /它是node.js(重定向)中的最后一个ClientRequest实例，是浏览器中的XMLHttpRequest实例
  request: {}
}

1.7 拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

1.7 请求配置

// `responseType` 表示服务器响应的数据类型
//可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream//图片'
  responseType: 'json',

二生命周期

1 . vue 生命周期

在这里插入图片描述

1.1 作用 : vue 框架给我们提供的一些回调函数

1.2 执行顺序和时机

1.2.1 beforCreate

		刚初始化一个vue实例对象 还没有 methods方法和data 数据

1.2.2 created

		1) data  methods 都已经初始化好了
		2) 在模版渲染成 html 前调用  通常初始化某些属性值 然后再渲染成视图
		3) 应用场景  发送请求获取数据

1.2.3 beforeMount

		模版在内存上编译好了 还没挂载到页面上 页面上的数据还是旧数据

1.2.4 mounted

		1) 当dom 元素加载完成后 初始化一次
		2) 在模版渲染成html后调用 通常是初始化页面完成后 
	再次对 html 的dom 节点进行一些需要的操作 
		3) 应用场景   导航栏的动画效果

1.2.5 beforeUpdata

		data数据是新的 但是页面上的数据还是旧的

1.2.6 updata

		1) 当数据发生改变后 重新渲染数据 会执行多次
		2) 应用场景   页面中切换商品  通过路由跳转 
	页面不刷新 但是数据发生改变

1.2.7 beforeDestory

		vue实例中的方法处于待销毁状态

1.2.8 destory

	1) vue中所有组件已被销毁
	2) 应用场景  组件销毁之前 做写清理工作

在这里插入图片描述

2 react 生命周期

在这里插入图片描述

2. 常用方法

2.1 constructor

这个方法是组件的构造函数在组件初始化的时候会自动执行

2.2 render

在componentWillMount 之后执行也会在state和props 数据发生变化时执行所以这个方法在组件开始会执行在组件数据发生变化时会执行

2.3 componentDidtMount

在组件挂载到页面上之后自动执行

2.4 componentDidUpdate

在组件更新之后执行

2.5 componentWillUnmount

在组件销毁之前执行

3. 不常用方法

3.1 shouldComponentUpdate

在更新之前执行不过这个方法可以决定是否更新组件需要返回一个布尔值
如果返回一个true 那就会先进入到componentWillUpdate 然后进入到render 方法然后进入 componentDidUpdate方法
返回一个false 就会停留在当前方法视图就不会更新

4. 订阅钩子

componentWillUnmount (){} //取消订阅内放state中中定义的方法
componentDidMount (){}
在这里插入图片描述

三 . vuex

网站 : https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc

1. 使用方法:

创建一个store 文件夹
导入vue和vuex
最后使用 export default 导出 store
在mine .js 中导入 store 对象

2. 保存方法

在vuex中实例化 vue
创建 state 保存数据如图

在这里插入图片描述
3. 页面通过this.$store.state.count( 这个是store中保存的键 ) 获取数据如图

3. Mutations

修改store 中值的唯一方法

使用方法:

在store中的vue实例中设置 mutations 并在其中添加方法如图
页面中通过this.$store.commit() 修改store修改如图

4. Acitions

官方不推荐直接使用 mutations 需要提交一个actions 在actions中提交的mutation 再去修改状态

注意点修改方式为 `this.$store.dispatch()`

store 中设置 :
在这里插入图片描述

四 . redux

在这里插入图片描述

代码实现

1. 安装模块 `npm i redux -S`

2. 创建 store 文件夹

2.1 index.js 文件 (仓库管理员)

// 导入创建store的的工厂函数
import { createStore } from 'redux';
// 导入等会要创建的reducer文件
import reducer from './reducer'

// 创建一个store
let store = createStore(reducer);

export default store;

2.2 reducer.js (仓库)

const defaultState = {
    "aList":[],
    "sTodo":""
};
// state参数起始存放的是原始数据
// action参数是由store传递进来的数据变更，它其实是一个对象(修改工单)
let reducer = (state=defaultState(这个就是初始化的数据),action)=>{
    return state;
}

export default reducer;

2.3 导入 store

3. 获取数据

this.state = store.getState() 然后在需要获取到值的位置进行解构赋值如图在这里插入图片描述

4.修改数据中心的值

修改的地方设置方法创建修改数据的工单(对象)
2.let action = { type:’ change_val , value:‘123’ ’ } 对象内设置两个键一个type 一个是value
type 中设置一个自定义的名称作用使数据中心知道你要修改的对应值
value 修改的数据
store.dispatch( action ) 提交工单如图
数据中心通过action接受工单
组件中需要订阅数据中心的修改 store.subscrube( this.自己订阅的方法 )
自己的方法:

五 . 深浅拷贝

浅拷贝只复制指向某个对象的指针而不是对象本身新旧对象还是共享一块内存但是深拷贝会另外创造一个一模一样的对象新对象和原对象不共用内存修改新对象也不会改到原来的对象

1. js数据类型

1.1 简单数据类型 : 数值字符串布尔 null undefined
1.2 复杂数据类型 : 对象函数

2. 浅拷贝

2.1 浅拷贝只是拷贝基本数据类型如果父对象的属性等于数组或另一个对象那么实际上子对象只是获取到了一个内存地址

3. 深拷贝

3.1 深拷贝就是能实现真正意义上的数据和对象的拷贝通过递归调用浅拷贝深拷贝会创建另外一个一模一样的对象与原对象不共享内存修改新对象不会改到原对象
3.2 常用的深拷贝方法 JSON.parse(JSON.stringify( 数据 ) )

六架构模式

1 mvc

在这里插入图片描述
缺点 : Controller 逻辑复杂难维护无法测试

2. mvp

在这里插入图片描述

3. mvvm

在这里插入图片描述
作用

将模型转化为视图即将后端传递的数据转化为看得到的页面实现方式数据绑定
将视图转化为模型即将看的到的页面转化为后端的数据实现方式 DOM事件监听
这两个转化的实现过程就是双向绑定

4. mvvm 在vue框架中个应用

vm通常需要实现一个观察者当数据发生改变 vm能监听到数据的变化然后通知到对应的视图自动更新当操作视图的时候 vm也能监听到视图的变化然后通知数据的做改变 view 和vm能互相通信

七. 闭包

1. 闭包的特性

函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制进行回收

2. 闭包的定义和优缺点

2.1 定义 :
闭包就是有权访问另外一个函数作用域中变量的函数创建闭包最常见的方式就是在一个函数内部创建另外一个函数通过这个函数访问这个函数的局部变量
2.2 优缺点 :
常驻内存会增大内存的使用量造成内存的泄露
主要应用场合设计私有的地方和变量
闭包会使变量始终保存在内存中，如果不当使用会增大内存消耗。 在这里插入图片描述
2.3 js的垃圾回收原理

在JavaScript 中如果一个对象不在被引用那么这个对象就会被回收
如果两个对象相互引用而不再第三者所引用那么这两个相互引用的对象也会被回收

2.4 使用闭包的好处

希望有一个变量长期驻扎在内存中
避免全局变量污染
私有成员的存在

八 flex布局弹性布局

链接 : https://www.cnblogs.com/136asdxxl/p/8544195.html

display:flex
设为 Flex 布局后，子元素的float、clear和vertical-align属性将失效
容器的属性

2.1 justify-content 主轴在水平方向
- 1 ) flex-start 默认值左对齐
- 2 ) flex-end 右对齐
- 3 ) center 居中
- 4 ) space-between 两端对齐间隔相等
- 5 ) space-around 每个项目的两侧间隔相等
2.2align-items 垂直方向
- 1 ) flex-start：交叉轴的起点对齐。
- 2 ) flex-end：交叉轴的终点对齐。
- 3 ) center：交叉轴的中点对齐。
- 4 ) baseline: 项目的第一行文字的基线对齐。
- 5 ) stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
2.3 flex-direction 决定主轴方向
- 1 ) row（默认值）：主轴为水平方向，起点在左端。
- 2 ) row-reverse：主轴为水平方向，起点在右端
- 3 ) column：主轴为垂直方向，起点在上沿。
- 4 ) column-reverse：主轴为垂直方向，起点在下沿。