- 博客(48)
- 收藏
- 关注
RSS订阅原创 redux 和vuex的区别
先看Vuex作者尤雨溪的回答Vuex 其实是一个针对 Vue 特化的 Flux，主要是为了配合 Vue 本身的响应式机制。当然吸取了一些 Redux 的特点，比如单状态树和便于测试和热重载的 API，但是也选择性的放弃了一些在 Vue 的场景下并不契合的特性，比如强制的 immutability（在保证了每一次状态变化都能追踪的情况下强制的 immutability 带来的收益就很有限了）、为了同构而设计得较为繁琐的 API、必须依赖第三方库才能相对高效率地获得状态树的局部状态等等（相比之下 Vuex
2022-05-19 23:34:34
3021
原创 前端炫酷登录页，拿来就能用
一. 炫酷星空代码<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>运营系统登录页</title> <link href="static/css/login.css" rel="stylesheet" type="text/css">&...
2022-05-19 23:11:00
58942
2
原创 react 和vue的理解
当面试官问我们，对react的理解，对vue的理解，我们可以从下面四个方面回答1是什么2能干什么3是如何干的4干的怎么样 优点，缺点5当然也可以补充一些其他的知识首先说一下react1是什么官方文档 :用于构建用户界面的 JavaScript 库2能干什么可以通过组件化的方式来快速响应大型web应用3如何干的官方文档声明式React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的..
2022-05-16 00:31:09
1175
原创 REACT高阶组件面试如何回答得高分
React中的HOC1组件是将props转换为UI,而高阶组件是将组件转换为另一个组件2HOC本质就是一个函数，该函数接受一个组件作为参数，并返回一个新的组件，这是一种模式3我们可以称之为纯组件，因为他们以接受任何动态提供的子组件，但他们不会修改或复制其输入组件中的任何行为HOC用例:1.代码复用，逻辑抽象化2.渲染劫持3.抽象化和操作状态(state)4.操作属性props下面是官方解释∶高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。...
2022-05-08 23:14:35
683
原创 React基础之事件机制
一、组件基础1. React 事件机制<div onClick={this.handleClick.bind(this)}>点我</div>React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的.
2022-05-05 00:04:43
2055
原创 面试题 函数也是引用类型为什么返回function而不是object
这个问题不好回答，我们可以查一下ecma语言规范文档最后两行呢一个对象如果实现了call方法则是function如果没有实现call方法，则是object那我们可以这样回答，ECMA-262中规定任何在内部实现[[Ca11]]方法的对象都应该在应用typeof操作符时返回"function"...
2022-04-26 22:24:38
215
原创 obj设置对象属性只读
Object.defineProperty()定义MDN上Object.defineProperty()定义是：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。对象的数据属性对象的数据属性有四个描述其行为的特性：configurable表示能否被修改或删除，如通过delete删除属性从而重新定义属性，或者能否把属性修改为访问器属性。直接在对象上定义的属性，这个特性的默认值是true，使用Ob...
2022-04-26 00:06:13
1351
原创 Object的一些方法
1.Object.entries(）Object.entries:遍历对象，把属性，值组成数组，再返回一个新的二维数组let obj = { 'a': 1, "b": 2, "c": 3 };let obj1 = Object.entries(obj);输出：[["a", 1],["b", 2],["c", 3]] let obj2 = Object.fromEntries(obj1)//{ a: 1, b: 2, c: 3 };2.Object.fromEntries(）..
2022-04-25 23:53:04
450
转载 为啥VUE和React都选择hooks
「2022 年什么会火？什么该学？本文正在参与“聊聊 2022 技术趋势”征文活动」📖阅读本文，你将: 初步了解Hooks在vue与react的现状 听一听本文作者关于Hooks的定义和总结 弄懂“为什么我们需要Hooks” 进行一些简单的Hooks实践 一、hooks: 什么叫大势所趋？2019年年初，react在16.8.x版本正式具备了hooks能力。2019年6月，尤雨溪在vue/github-issues...
2022-04-22 23:48:04
167
原创 为什么面试总是爱问闭包
闭包了解闭包前先来了解一下上级作用域和堆栈内存释放问题。上级作用域的概念函数的上级作用域在哪里创建创建的，上级作用域就是谁var a = 10function foo(){ console.log(a)}function sum() { var a = 20 foo()}sum()/* 输出 10/函数 foo() 是在全局下创建的，所以 a 的上级作用域就是 window，输出就是 10...
2022-04-21 00:28:40
122
原创 手写 vue.use Vue.compile Vue.mixin
一、Vue.useVue.use(plugin);（1）参数{ Object | Function } plugin（2）用法安装Vue.js插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为install方法。调用install方法时，会将Vue作为参数传入。install方法被同一个插件多次调用时，插件也只会被安装一次。关于如何上开发Vue插件，请看这篇文章，非常简单，不用两分钟就看完：如何开发 Vue 插件？...
2022-04-18 22:05:29
166
原创 总结了五种js更加简洁的写法
JavaScript无处不在，从PC端到移动设备端，甚至是后端，都在使用JavaScript1、使用默认参数代替短路或条件默认参数通常比短路更干净。functionSomeMethod(paramThatCanBeUndefined){constlocalValue=paramThatCanBeUndefined||"DefaultValue";console.log(localValue)//...}SomeMethod()//D...
2022-04-16 00:28:19
667
转载 10个有用的自定义钩子函数vue.js
Vue 是我使用的第一个 JS 框架。可以说，Vue 是我进入JavaScript世界的第一道门之一。目前，Vue 仍然是一个很棒的框架。随着 composition API 的出现，Vue 只会有更大的发展。在这篇文章中，我将介绍 10 个有用的自定义钩子，让我们的代码更加好看。useWindowResize这是一个基本的钩子，因为它被用在很多项目中.import { ref, onMounted, onUnmounted } from 'vue';export functio...
2022-04-15 12:46:30
995
原创 虚拟长列表我学会了
虚拟列表的使用场景如果我想要在网页中放大量的列表项，纯渲染的话，对于浏览器性能将会是个极大的挑战，会造成滚动卡顿，整体体验非常不好，主要有以下问题：页面等待时间极长，用户体验差CPU计算能力不够，滑动会卡顿GPU渲染能力不够，页面会跳屏RAM内存容量不够，浏览器崩溃1. 传统做法对于长列表渲染，传统的方法是使用懒加载的方式，下拉到底部获取新的内容加载进来，其实就相当于是在垂直方向上的分页叠加功能，但随着加载数据越来越多，浏览器的回流和重绘的开销将会越来越大，...
2022-04-15 12:35:48
1144
1
原创 Object.hasOwn“替代“in”操作符
JavaScript在不断地升级迭代，越来越多的新特性让我们的代码写起来变得简洁有趣，这篇文章会介绍5个新特1.# 使用"Object.hasOwn"替代“in”操作符有时，我们想知道对象上是否存在某个属性，一般会使用“in”操作符或“obj.hasOwnProperty”，但它们都有各自的缺陷。in如果指定的属性位于对象或其原型链中，“in”运算符将返回true。const Person = function (age) { this.age = age}Person.pro
2022-04-15 12:22:27
2626
原创 webpack优化
webpack优化很有必要上一篇文章给大家讲解了简单搭建一个Vuecli，但是只是基本搭建，而没有进行进一步的优化。而使用webpack打包躲不开的就是webpack优化这个话题，无论是面试还是实际开发，优化都是非常重要的事情，毕竟提升用户体验是我们前端工程师的职责构建时间优化首先就是构建时间的优化了thread-loader多进程打包，可以大大提高构建的速度，使用方法是将thread-loader放在比较费时间的loader之前，比如babel-loader...
2022-04-13 13:09:36
4216
原创 前端无痛刷新Token
这个需求场景很常见，几乎很多项目都会用上，之前项目也实现过，最近刚好有个项目要实现，重新梳理一番。需求对于需要前端实现无痛刷新Token，无非就两种：请求前判断Token是否过期，过期则刷新 请求后根据返回状态判断是否过期，过期则刷新处理逻辑实现起来也没多大差别，只是判断的位置不一样，核心原理都一样：判断Token是否过期 没过期则正常处理 过期则发起刷新Token的请求 拿到新的Token保存 重新发送Token过期这段时间内发起的请求 ...
2022-04-12 18:48:51
2926
2
原创 太多if判断会不会影响性能
面试官问太多if会不会影响性能根据大量实践，多if并不会影响性能,因为底层他也是if的，程序设计(c，C++，java等)书中有写，if相比较于其他的判断性能要高很多。如果非要说影响，那就是渲染方面了，渲染层从.创建开始到渲染完成过程中，如果用if进行---些渲染判断(加载不同端的代码和设备判定之类的)会存在渲染阻塞和重新渲染，这部分的性能损耗是最明显和最大的，至于js层面的，如果实在觉得if不好看可以考虑换其他的判定语句，对于性能影响不大因为有限步骤时间复杂度就是0(1)，主...
2022-04-08 22:42:53
3323
原创 面试题typeScript
ts基础知识复习https://juejin.cn/post/6844903981227966471#heading-79😊 ts中的访问修饰符public，任何地方private，只能在类的内部访问protected，能在类的内部访问和子类中访问readonly，属性设置为只读😊 const和readonly的区别const用于变量，readonly用于属性const在运行时检查，readonly在编译时检查使用const变量保存的数组，可以使用push...
2022-04-08 13:39:24
733
原创 手写一个vue响应式
Vue 视图更新原理Vue 的视图更新原理主要涉及的是响应式相关APIObject.defineProperty的使用，它的作用是为对象的某个属性对外提供get、set方法，从而实现外部对该属性的读和写操作时能够被内部监听，实现后续的同步视图更新功能一、实现响应式的核心API：Object.definePropertyObject.defineProperty的用法介绍：MDN-Object.defineProperty，下面是模拟 Vue data 值的更新对API接口进行初...
2022-04-08 00:51:33
304
原创 axios在vue框架中的使用
axios概念Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。axios和vue-axiosaxios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定。vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装。import axios from 'axios'...
2022-04-08 00:43:01
1207
原创 【CSS】grid和flex
CSS3常用的两种布局及其区别前言：不久以前，所有 HTML 页面的布局还都是通过 table、float 以及其他的 CSS 属性来完成的。面对复杂页面的布局，却没有很好的办法。然而 Flexbox 的出现，便轻松的解决了复杂的 Web 布局。 现在，又出现了一个构建 HTML 最佳布局体系的新竞争者。它就是强大的 CSS Grid 布局。grid和flex区别是什么？适用什么场景？Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。 Grid 是二维布局系统，通常用于整个
2022-04-05 22:28:23
2684
原创 Es6 中很好用的数组方法
Array.from方法Array.from方法用于将两类对象转为真正的数组： 类似数组的对象（array-like object） 所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组。 可遍历（iterable）的对象（包括 Set 和 Map） Array.from('hello')// ['h', 'e', 'l', 'l', 'o'] let namesSet = new
2022-03-21 13:21:19
791
原创 defineProterty的属性值有哪些
configurable 是否可以删除属性和属性描述enumerable 才能出现在对象枚举中value 初始值writable 是否能被赋值运算符改变getset
2022-03-09 08:59:45
114
原创 前端优化提升首页加载
用vue开发项目上线以后，发现首页加载速度非常慢，如果项目比较大，甚至可能出现10s以上的等待。用户体验非常差，试想如果你准备买一双AJ，登录某宝首页等了足足5s，那肯定果断选择某多多了。以我们公司的项目为例，输入网址以后会出现十几秒的空白页，如果是后台管理系统还能接受，嵌套式的H5面对的是C端用户，产品肯定是无法接受的。仔细分析了下，主要是打包后的app.js太大，以及我们引用的一些插件安装包加载比较慢，在网上搜了很多解决加载慢的方案，最终优化的时间移动端H5页面2秒多，后台管理系统5秒多。...
2022-03-06 22:56:46
446
原创 前端面试 React（下）
六、Redux1. 对 Redux 的理解，主要解决什么问题React是视图层框架。Redux是一个用来管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂， JavaScript需要管理比任何时候都要多的state（状态）， Redux就是降低管理难度的。（Redux支持React、Angular、jQuery甚至纯JavaScript）。在 React 中，UI 以组件的形式来搭建，组件之间可以嵌套组合。但 React ...
2022-03-04 22:23:05
1031
原创 前端面试 React篇（上）
一、组件基础1. React 事件机制<div onClick={this.handleClick.bind(this)}>点我</div>React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不...
2022-03-04 22:20:37
693
原创 vuex，页面刷新数据丢失的多种解决办法
为什么说刷新页面vuex的数据会丢失刷新页面vuex的数据会丢失属于正常现象，因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。第一种方法用sessionStorage将接口返回的数据保存在vuex的store里，也将这些信息也保存在sessionStorage里。注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionS...
2022-03-03 13:33:36
2279
1
原创 前端面试 手写输出题
前言：代码输出结果是面试中常考的题目，一段代码中可能涉及到很多的知识点，这就考察到了应聘者的基础能力。在前端面试中，常考的代码输出问题主要涉及到以下知识点：异步编程、事件循环、this指向、作用域、变量提升、闭包、原型、继承等，这些知识点往往不是单独出现的，而是在同一段代码中包含多个知识点。所以，笔者将这些问题大致分为四类进行讨论。这里不会系统的阐述基础知识，而是通过面试例题的形式，来讲述每个题目的知识点以及代码的执行过程。如果会了这些例题，在前端面试中多数代码输出问题就可以轻而易举的解决了。注：.
2022-03-02 23:58:44
357
1
原创 前端面试 手写代码篇
一、JavaScript 基础1. 手写 Object.create思路：将传入的对象作为原型function create(obj) { function F() {} F.prototype = obj return new F()}2. 手写 instanceof 方法instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。实现步骤：首先获取类型的原型 然后获得对象的原型 然后一直循环...
2022-03-02 23:54:54
462
原创 前端面试 性能优化篇
一、CDN1. CDN的概念CDN（Content Delivery Network，内容分发网络）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。典型的CDN系统由下面三个部分组成：分发服务系统：最基本的工作单元就是Cache设备，cache（边缘cache）负责直接响应最终用户的访问请求，把缓存在本地的内容快速地提供给用户。同时cache还...
2022-03-02 23:53:08
943
原创 前端面试 浏览器原理
一、浏览器安全1. 什么是 XSS 攻击？（1）概念XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。攻击者可以通过这种攻击方式可以进行以下操作：获取页面的数据，如DOM、cookie、localStorage； DOS攻击，发送合理请求，...
2022-03-02 23:51:29
768
原创 前端面试 计算机网络篇
一、HTTP协议1. GET和POST的请求的区别Post 和 Get 是 HTTP 请求的两种方法，其区别如下：应用场景：GET 请求是一个幂等的请求，一般 Get 请求用于对服务器资源不会产生影响的场景，比如说请求一个网页的资源。而 Post 不是一个幂等的请求，一般用于对服务器资源会产生影响的情景，比如注册用户这一类的操作。 是否缓存：因为两者应用场景不同，浏览器一般会对 Get 请求缓存，但很少对 Post 请求缓存。 发送的报文格式：Get 请求的报文中实体部分为空...
2022-03-01 23:32:33
1079
原创 前端面试vue （下）
四、路由1. Vue-Router 的懒加载如何实现非懒加载：import List from '@/components/list.vue'const router = new VueRouter({ routes: [ { path: '/list', component: List } ]})（1）方案一(常用)：使用箭头函数+import动态加载const List = () => import('@/components/list.vu...
2022-03-01 23:28:02
1395
原创 前端面试vue (上)
一、Vue 基础1. Vue的基本原理当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。2. 双向数据绑定的原理Vue.j...
2022-03-01 23:25:39
691
原创 4 前端面试 js （下）
六、this/call/apply/bind1. 对this对象的理解this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this 的指向可以通过四种调用模式来判断。第一种是函数调用模式，当一个函数不是一个对象的属性时，直接作为函数来调用时，this 指向全局对象。 第二种是方法调用模式，如果一个函数作为一个对象的方法来调用时，this 指向这个对象。 第三种是构造器调用模式，如果一个函数用 new 调用时，函数执行前会新创建一个对象，this...
2022-02-28 20:07:48
264
原创 3 前端面试，js（上）
一、数据类型1. JavaScript有哪些数据类型，它们的区别？JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。其中 Symbol 和 BigInt 是ES6 中新增的数据类型：Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。 BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以...
2022-02-28 20:05:59
460
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人