文章8
标签3
分类4

记录一下面试遇到的题。

数组遍历 map 与 filter 不 return 的区别

map 为返回 为 undefined 的一个数组 它的 length 为 map的length。

filter 返回 一个空的数组

待续

这几天面试了4家,有两家正规的面试没有,有家试岗3天还没有工资,依据我国相关法律的规定,试岗期没有工资肯定是不合法的,劳动者在试用期的,用人单位应该按不得低于本单位相同岗位最低档工资或者劳动合同约定工资的百分之八十支付工资。(=-=)感觉就不是很靠谱。

还有一家给我的感觉像培训,口号就是如果你希望学习到技术,就来,不是奔着钱来的。其实钱不钱的无所谓,关键你这太脱离现实了。要知道一切离开现实或者是脱离了标准,都是空谈,下次换个口号,你就说找初级也行啊。我也没去面。

还有一家,不知道为什么,一直在说我的年龄问题,我觉得我年龄小,跟技术没什么关系。还说我已经具备了工作的能力,然而一直没给我反馈,我觉得不管是过没过,你至少得给我反馈吧,或者什么什么的,这浪费了我的时间,还有你的时间,你面试我难道就是为了玩吗?调侃我吗?

还有一家是 React 的,我承认我 react 只会用,你如果想让我说原理,我是真的只能说不出大概个所以然。

总结

程序员还得不断的学习,面4家两周有这些 机会 很不错了,还不能入职是我的原因吧,以后会继续努力的学习,不管如何,脚踏实地。一个月就快要过去了,我已经快自闭了,现在生活都是个问题,我能做什么呢这个是问题,先找到工作是我的首要目标。

现在国家提倡学生继续读书,本考研的考研,失业率这几年最高的,当然我们国家叫 灵活就业,不可能一群人跟你说天下太平就真的太平了,需要有人站出来说这些。 实事求是 追求真理,有时候我们真的该反思了一下了。love.jpg

2022复习vue2学习vue3

vue 是一款友好的,多用途且高性能的 JavaScript 框架,它可以帮你创建 可维护性和可测试性更强的代码库。

vue 是渐进式的 JavaScript 框架。本文档只记录 一些概念或者做法,从 vue 文档记录。

交互

我们写的方法中,更新了应用的状态,但没有触碰 DOM 所有的 DOM 操作都由 Vue 来处理,你编写的代码只需要关注逻辑层面即可。

组件

组件系统是 vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型,独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树;

MVVM

MVVMModel–view–viewmodel)是一种软件架构模式

MVVM有助于将图形用户界面的开发与业务逻辑后端逻辑(数据模型)的开发分离开来。是一种设计模式的变体。

当一个 vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中,当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

生命周期

每个 vue 实例在被创建时都要经过一系列的初始化过程--。数据监听 编译模板,将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这些过程运行一些叫做 生命周期的函数,这给了用户在不同阶段添加到自己的代码的机会。

本质上:每个主要 vue 生命周期事件被分成两个钩子,分别在事件之前和之后调用。 vue 应用程序中有 4 个主要事件(8个主要钩子)

  • 创建 - 在组件创建时执行
  • 挂载 - DOM 被挂载时执行
  • 更新 - 当响应数据被修改时执行
  • 销毁 - 在元素被销毁之前立即执行

beforeCreate 创建之前,访问不到data中的变量的。

create Dom 还没有编译,但是 vue 实例数据和方法可以访问了。

beforeMount 触发在编译 Dom 阶段的,编译模板阶段。我们在这个钩子对页面元素内容是不能修改的。

Mounted 页面挂载完毕之后,这时候我们就可以修改 DOM,已经可以看到页面了。在 mounted 构造函数之后,vue 实例已经创建完毕了,就进行运行阶段了。

这里我要说一下,对Vue的数据更新页面改变的理解,Vue的实例中比如data里面的数据的话,我们假如插值在页面上的话,我们修改这个数据,它不是及时渲染到页面上面的,它是在内存中对之前的虚拟DOM中的data数据进行更改,生成新的虚拟DOM之后才会渲染到页面上。

beforeUpdate 更改data数据后,当虚拟DOM中的data发生改变时触发,此时虚拟DOM没有加载到页面上。页面上的数据不变,虚拟DOM中的数据改变。

Updated 更改data数据之后,虚拟DOM中的data发生改变页面上的data也发生改变(即新生成的虚拟DOM挂载上页面了)

销毁阶段

beforeDestroy------------销毁前执行的钩子函数,可以继续使用vue实例中的数据。
destroyed------------------已经销毁了,vue实例中的数据不可用了。

还有一个没用过的记录一下

actived

deactivated

errirCaptured

vue3生命周期

beforeCreate 跟 created ---> setup

setup()this是不指向当前实例的(this 为 undefined)如果想使用 $emit 的功能,需要借助 setup(props,context)中的 context;

mounted ---> onMounted

beforeUpdate ---> onBeforeUpdate

updated ---> onUpdated

beforeDestroy ---> onBeforeUnmount

destroyed ---> onUnmounted

actived ---> onActivated

deactivated ---> onDeactivated

errorCaptured ---> onErrorCaptured ,onRenderTracked,onRender,Triggered

v-if v-for

vue 在 2.x 版本中的一个元素同时使用 v-fi 和 v-for 时,v-for 会优先使用。

v-if v-for

vue 在 3.x 版本中 v-if 总是优先与 v-for 生效。避免在同一元素上同时使用两者。

v-bind

vue 在2.x 版本中如果 dom 属性 跟 bind绑定属性一样 ,dom 属性总是会覆盖 bing 绑定的属性;

vue 在3.x 绑定的声明顺序决定 dom 属性绑定的值。

ref

我们知道在 dom 上添加 ref 属性 可以通过 this.$refs.xxx 获取到 dom 元素。或者在 组件上添加 可以获取到 组件的实例;

inheritAttrs

当我们使用组件时,为其传递的 props 进行定义,才能够使用,如果没有定义,这个属性会作为 dom 的属性被渲染。解决是 在组件内 inheritAttrs: false

$attrs

项目中有多层组件传参可以使用 $attrs 配合 inheritAttrs 控制这些特性是否显示在 dom 元素上。

$listeners

vue3 已经不支持 $listeners 在 vue3 合并到了 $attrs

计算属性

vue 用声明的方式创建这种依赖关系,计算属性的 getter 函数是没有副作用的,就是只有依赖的状态发生改变依赖的方法绑定也会更新。计算属性是基于响应式依赖进行缓存的,只会在相关响应式依赖发生改变时它们才会重新求值。依赖没有发生改变计算属性会返回之前的结果。

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter

监听属性

watch 响应数据的变化,当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定;父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。

prop 规范 prop用来传递一个初始值的话,最好本地 data 定义一个数据用这个 prop 作为其初始值2

prop 规范 prop 值需要转换。 最好使用 计算属性处理这个prop

prop验证

app.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 值会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组的默认值必须从一个工厂函数返回
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须与下列字符串中的其中一个相匹配
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组的默认值不同,这不是一个工厂函数——这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
})

:eagle: 提示

注意 prop 会在一个组件实例创建之前进行验证,所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

emits

emits:列表声明从父组件继承来的事件

$emit:抛出事件,通过父组件处理

在子组件中,通过 $emit() 来触发事件

在父组件中,通过 v-on 来监听子组件事件

Provide / Inject (的绑定不是响应式)

深度嵌套的组件,而深层的子组件只需要父组件的部分内容。这种情况下,我们可以使用 Provide Inject:父组件使用 provide 提供数据 ,子组件 inject 使用这些数据。

值得注意的 provide 要提供组件实例属性的话,我们需要将 provide转换为返回对象的函数;

异步组件

defineAsyncComponent

组合式 API

新的 setup 选项在组件被创建之前执行,一旦 props 被解析完成,它就将被作为组合式 API 的入口。

在 setup 中你应该避免使用 this,因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前,所以它们无法在 setup 中被获取。

总结

组合式 API光看文档是不行的,还得练,vue 3更新了很多特性,感觉有点像 react ref什么的。

面试被问到 cookie和session

我貌似还没做到过跟 cookie 和 session 相关的。这是记录一下,也是学习!Sim.jpg

cookie (整个web开发的技术)

cookie 客户端电脑中用于保存会话状态的资源是保存在客户端电脑里面的。(网络会话状态跟踪的技术)

会话是一组请求与响应构成,围绕着一件事做请求与响应。

HTTP 协议是一种无状态协议,这次请求与响应下一次是获取不到的,没办法实现状态的跟踪。所以产生了 cookie

cookie 是由服务器生成,保存在客户端的一种信息载体。这个载体存放用户访问站点该站点的会话状态信息。

服务器生成 cookie 放在响应头,响应的形式发送到客户端。客户端接受到响应后,将 cookie 保存到客户端。当客户端再次发送同类请求后,在请求中会携带保存在客户端的 cookie 数据,发生到服务端,由服务器对会话进行跟踪。

cookie 是由若干键值对构成,这里的键一般称为 name,值称为 value。键和值都是 字符串

cookie 登录的应用(Node.js)

哔哩哔哩 av: BV1hw411d7Vg

session (整个web开发的技术)

session 即会话,是 web 开发中的一种会话状态跟踪技术。cookie 是将会话状态存在 客户端硬盘里。而 session 是存放在服务端

在服务端会话技术,在一次会话的多次请求间共享数据,将数据保存在服务端的对象中

为什么使用cookie和session

我们都知道 http 协议是无状态的,服务器无法识别两条 http 请求是否是同一个用户发送的。如果想记录多次请求是否是同一个用户发送的。我们通常使用 cookie 和 session 来确定会话双方的身份。

第一次访问创建 session 对象,给 session对象分配一个唯一的ID

把SESSIONID 作为 cookie 的值发送给浏览器保存

第二次访问的时候,浏览器带着 SESSIONID 的 cookie 访问服务器

服务器校验验证

React 复习

2022 React

React 只是一个 JavaScript 库,它允许我们编写更多的 JavaScript, 与页面互动。

以声明方式创建一个巨大的 JavaScript 对象,它在 JavaScript 中创建一个虚拟Dom,React 库使用 虚拟Dom 以声明的方式为我们更新 DOM。

声明式

声明式编写 UI React帮助我们高效更新渲染组件

组件化

组件逻辑由 JavaScript 编写可以轻松地在应用中传递数据 单向数据流;

React 使用一个虚拟Dom 的东西来为我们处理 Dome 的变化

安装

React 运行5.0.0不能使用 5.0.1命令行解决

create-react-app -V
先看看 版本

npm uninstall -g create-react-app
卸载

create-react-app -V
如果没有卸载掉

where create-react-app
win cmd命令行 把文件夹关于create-react-app 的东西全部删掉

[安装](https://create-react-app.dev/docs/getting-started/)

npx create-react-app my-app --template typescript

npm 是节点包管理器,这些包只是这些不同的节点相关的

npx 实际上是一个包含在 npm 版本五点二及更高版本中的工具 npm 的工具

import React from 'react';  React 是运行这些应用程序构建方式的引擎。
import ReactDOM from 'react-dom/client'; React Dom 指定该引擎应该针对 Web 相关的应用程序
这两个库的结合实际上使我们能够在 React 中构建我们所有的 Web 应用程序
root.render(
  <React.StrictMode> 严格模式
    <App />
  </React.StrictMode>
);

JSX 只是 JavaScript 的语法扩展

React 变化 是状态不同是指内存中是否存在完全不同的对象。而不是 值修改

this.setState

与当前的状态对象进行浅合并,浅合并只是意味着你在这个对象内部传递给我的任何值,我都会更新检查状态对象是否有相同的键。如果相同的键,我就使用新值更新你的状态键。

key

React 为了优化 确定某个状态更新将那个组件与那个相关的状态的唯一键值。

用户JSON

生命周期

hook.PNG
componentDidMount(挂载阶段) React第一次将组件渲染到正在安装的页面上,它仅在组件生命周期发生一次 (组件创建时(页面加载时))

shouldComponentUpdate() 控制是否更新,比如没有受到 父 props影响的组件由于父更新而被迫更新。

接收三个参数(nextProps,nextState,nextContext)

Css

<div className={`search-box ${this.props.classname}`}>

React 18

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const container =  document.getElementById('root') as HTMLElement;
const root = createRoot(container);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

虚拟Dom

react 复制了真实的Dom,在 JS 中,它没有真正使用 Dom 元素,而是在 JS 中反映了所有的元素,JS 在实际创建和反应这些更改方面要快得多,我们需要一个真实的 Dom 来实际显示给用户,当我们更新修改依赖的元素状态,它会制作另一个虚拟 Dom副本,react 要做的是使用这个最新虚拟 dom 副本作为它正在运行实际的 dom 树。

为什么使用JSX

React 认为渲染逻辑本质 与 其他Ui 逻辑内在耦合,比如在 UI 中绑定处理事件。

React 没有采用将标记和逻辑分离到不同文件中,而是将它们存放在一个称之为 “组件”松散耦合的地方,来实现关注点分离。在计算机科学中,关注点分离( SoC ) 是将计算机程序分成不同部分的设计原则。

JXS 防止注入攻击

React Dom 在渲染所有内容之前,会默认进行转义,它可以确保你在你的应用中,永远不会注入你输入的内容,而是转为字符串,这可以防止 XSS 跨站脚本攻击。

React 只更新它需要更新的部分

React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。

key

key 帮助 React 识别那些元素改变,比如添加和删除。因此你应当给数组中的每一个元素赋予一个确定标识。

提取组件 key正确的使用方式

function ListItem(props) {
  // 正确!这里不需要指定 key:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 正确!key 应该在数组的上下文中被指定
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

一个好的经验法则是:在 map() 方法中的元素需要设置 key 属性。

表单

formik好用的表单控件

记录面试题

render函数什么时候会执行?

当 this. State 或者 this. Props 发生改变的时候 render 函数就会执行

redux异步请求用redux-thunk中间件

同源

两个端口的协议端口域名都一样的话我们称之为同源

重绘和重排

重绘:我们修改了 dom 元素的背景色或者阴影浏览器就会根据属性进行计算

重排:我们修改改变了 dom 的位置,渲染树就会重新计算重新布局重新渲染

props

props 是 React 中属性的简写。它们只读,不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。

React 组件的生命周期有三个不同的阶段

初始渲染阶段:组件开始生命之旅并进入 Dom 阶段

更新阶段:组件被添加 Dom 中,它 只有 prop 或 状态发生变化才可能更新和重新渲染。

卸载阶段:组件被销毁被从 Dom 中删除

纯组件

没有副作用就是里面的依赖的状态是自己内部的,纯组件增加了代码的简单些和应用的性能。

MVC框架的主要问题是什么

以下是MVC框架的一些主要问题:

对 DOM 操作的代价非常高

程序运行缓慢且效率低下

内存浪费严重

由于循环依赖性,组件模型需要围绕 models 和 views 进行创建

Redux

Redux 是 JS 应用状态管理器,提供可预测的状态管理。它体积小只有 2kb是个强大的插件扩展依赖。

npm install @reduxjs/toolkit

npx create-react-app my-app --template redux

应用整体全体状态以对象树的方式存放与单个 store。唯一改变状态树 的方法是创建 action,一个描述发生了什么的对象。并将其 dispatch 给 store。

要指定状态树如何响应 action 来进行更新的话,可以编写 reducer 函数 这些函数根据旧 state 和 action 来计算新 state。

  • createStore
  • combineReducers
  • applyMiddleware
  • bindActionCreators
  • -compose

action

唯一改变状态树 的方法是创建 action,一个描述发生了什么的对象。并将其 dispatch 给 store。

Reducer – 这是一个确定状态将如何变化的地方。

Store

js 对象 ,它可以保存程序状态,它提供了一些方法访问状态所有操作都通过 reducer 返回一个新状态

  • getState()
  • dispatch(action)
  • subscribe(listener)
  • -replaceReducer(nextReducer)

Redux Toolkit

官方推荐的用来写 Redux逻辑的

React路由

开发单页 Web 应用,React-router-dom

react-router-dom6

BrowserRouter 存在服务区管理动态请求

Router

Route

Routes

Link to标签可以帮助我们跳转

useNavigate

区分Real DOM和Virtual DOM

Real DOMVirtual DOM
1. 更新缓慢。1. 更新更快。
2. 可以直接更新 HTML。2. 无法直接更新 HTML。
3. 如果元素更新,则创建新DOM。3. 如果元素更新,则更新 JSX 。
4. DOM操作代价很高。4. DOM 操作非常简单。
5. 消耗的内存较多。5. 很少的内存消耗。

angular Loading加载

正文

这几天一直做琢磨 angular 的请求拦截, 两个服务 请求与响应当然也不一定要这样写,我们一般都会在数据请求使用 Loading

推荐一个库

https://github.com/mpalourdio/ng-http-loader

">