zhangsuren1的博客

原创 React和Vue的区别以及用法

性能：两者在性能上都表现优秀，但在某些场景下，由于React采用了虚拟DOM和diff算法，可能会比Vue有更好的性能。---useImperativeHandle. 暴露组件内的一些方法和数据，供父父组件使用。---useMemo 是为了减少组件重新渲染时不必要的函数计算，可以用来做。---useReducer 用于状态管理，要比useState要复杂的多。----React.memo() 包裹组件，防止组件重新渲染。----useCallback 返回的是那个。

原创 webComponent,shadowDom,js沙箱隔离,iframe简介。

总结：iframe隔离是独立的文档环境，shadowDom是封装在shadowRoot内部，scoped是加了一层变量作用域，而qiankun则是通过shadowDom配合像那种proxy去代理window对象来达到让沙盒内部代码优先原则，同时在子组件里配置的bootStrap,mount,unmount钩子函数，来恢复快照的方式去实现样式隔离的，状态快照会在bootStrap阶段去保存，一份是原来的一份是内部改变之后的，当再次进入沙盒或者退出沙盒都可以减少性能消耗了，非常的方便。

原创 封装主题思想？以及如何通过sass封装主题

但是我们会发现图中多了一个$curTheme,这玩意其实就是全局变量，我们为了记录当前主题颜色而设置的一个变量，当主题颜色发生改变的时候我就能确定当前所处的主题了，这个时候需要用到！然后还有一些像&的运用，可以确定当前的样式给到对应的类名，也是非常的细节。总的来说大致思路就是这样。但是我们这个时候会发现html中的内容是写死的，那按照正常来说的思想就是我们应该是通过别的组件写样式的时候传入的才能行，这个时候我们可以将原来写死的内容通过@content的方式改写，这也就有点像vue中插槽里的内容了。

原创 前端异步处理的方式有哪些以及promise分析与手写。

其中next传入的值就是上一个yield语句返回值的结果，就比如说这个函数刚进去的时候是x=5，然后第一个next结束返回value=6,然后第二次调用了next方法，传入了12也就是说y=2*12,相当于第一个yield表达式x+1直接被赋值为12，接着也是如此...调用指针对象的next方法，会移动内部的指针（执行任务的第一段），指向第一个遇到的yield语句（暂停），返回yield后面的表达式的值。- 回调函数的方式( 事件监听的方式， 事件订阅)- Promise的方式。关键字生成的下一个值。

原创 js类型检测，实例方法，遍历方式，set,Map,weakSet,weakMap简单的介绍

PS:for..in是遍历对象的可枚举属性，包括原型链上的数据，某些时候需要通过hasOwnProperty方法进行过滤一下，而后边提供的一些列Object的方法，无非就是先将object间接的转化为数组，然后在利用数组的遍历，object.keys是将对象的属性名组成一个数组，object.values是将对象的属性值组成一个数组，object.entries是将对象的属性名和属性值转化为键值对的数组。- 数组的遍历方式有forEach,标准的for循环，for...of，以及Map的方式。

原创 网络请求的方式(XHR,fetch,...)

总的来说：ajax是一种思想，是通过封装xhr来达到网络请求的目的，而实现网络请求的方式有xhr/fetch，这也是浏览器devTools网络里为啥有这个选项，然而axios是一个库，里边是对xhr实现了改写，同时提供了一些非常实用的拦截方法以及防御措施，具体源码你可以找个文章研究下。库呢，axios是xhr的子集，内部改写了xhr的内容，并且提供了一些内置的方法，而且也避免了回调地狱的问题这就导致了占据市场的主流。3. 然而这么好用的东西人们为啥不用，随着vue的兴起，而是使用主流的。

原创 js的事件循环机制

js的事件循环机制也就是分为简单的同步执行和异方式步执行的方式，当遇到同步代码的时候就直接交给调用栈执行，当遇到异步代码的时候就交给宿主环境去执行，就比如说setTimeout这种函数交给宿主环境去执行，执行完成之后是会将最终setTimeout的回调函数返回给任务队列的，然后这个时候如果调用栈中的代码都执行完了，调用栈就会看一下任务队列中是否有任务，如果有任务就会执行对应的任务，如果说任务队列进栈之后发现又是一个异步任务这个时候也就会再次放到宿主环境中，然后循环往复。其实也是非常的普通，不要被🐯到。

原创 前端如何解决跨域问题

2⃣️：请求头字段不能超过：Accept，Accept-Language，Content-Language，Last-Event-ID，Content-Type。很好理解，如果说他超出了简单请求的条件就可以称为非简单请求，像咱们常用的post请求，其实是个简单请求对吧，但是因为一般携带的数据为json,也就是content-type为application/json所以为非简单请求，一旦发送非简单请求，浏览器就会发送一个 OPTIONS 预检(preflight)请求。1⃣️：请求方式为post,get。

原创 Vue中的设计模式

在Vue.js中就比如说封装Watcher的时候就会通过判断这个对象的依赖是否收集dep.target也就是唯一的，其次比如说咱们项目中通常会有一个全局实例Vue或者那个app，又比如说Vue.directive、Vue.filter这两个方法也是单例模式。作用是当某个地方订阅了某件事之后，假如说有地方发布了之后也就可以对应的收到了，在Vue.js中体现为当我在一个组件中发布了一个事件（例如子组件中emits("xxx")），然后我在其他的组件中就可以做到接收了(例如父组件中的@xxxx="xxx").

原创 watch和watchEffect用法

当count发生变化的时候就会执行change函数，大家肯定遇到诸多弊端关于使用这个watch的时候1.比如没有一种情况是我需要当初始的时候就需要执行这个change函数呢，第一种可以使在options中配置{immediate:true}的时候就可以达到这个效果，你就会在第一次赋值或者初始化的时候执行一下change()，非常的方便。2.大家有没有遇到监测那种对象数组的时候呢，就是一个数组里装的全是对象，这个时候就会导致watch失效，然而大家可以通过配置{deep:true}；（果然不愧是副作用函数！

原创 动态组件，异步组件，组件存活

1. 我们在使用vue的时候难免会遇到一些需要频繁切换组件的时候，然而可能我们使用的比较万能的方式就是通过v-if，v-else-if,v-else等等来实现组件之间的切换，又或者说大家知道v-if会使得组件切换之后需要重新卸载和挂载，这就导致一定的性能消耗，然而大家可能会想到使用v-show的方式来进行切换，这必然是一个好的方式。2.但是呢，当我们使用v-show的时候去做组件切换的时候就会需要很多条件去限制，然后这个时候vue内部给我们提供了一个compoent组件的方式，然后这个compoent组件

原创 vue的响应式原理

每个observer类中都应该有个自己的dep依赖，因此当创建observer类的时候也要给每个类创建一个dep实例，当通过watcher检测的时候就看看组件是否存在dep，存在就在watcher的update或者get方法中做一些处理，其中就是通过dep.target的单例模式来进行操作的。2.watcher做依赖收集和派发更新。经典的图示：循环依赖。

原创 静态资源的动态访问

p4就是通过创建一个new URL()对象,()中传入一个带有动态和静态的组合路径，然后后边传入当前页面的URl最后返回的值里边就会有对应打包后的产物，且代码结构并为改变，非常好用.p3就是通过import('xxxx')先将图片导入，再通过.then的方式就可以拿到打包后的path，但是生成的dist目录中会有问题就是会每个img图像多一个js，用来导出的.注意：放在public中的文件不会添加上文件指纹加密，所以如果对这个要求不高的也可以放在public中。2.img中的src（静态路径）

原创 css中flex布局如何使用，如何让屏幕的宽高自适应？？？