sdasadasds的博客

要知道，render前后的两颗vDom tree进行diff，这个过程是不可中断的(以tree为单位，不可中断)，这将造成当diff的两颗tree足够庞大的时候，js线程会被diff阻塞，无法对并发事件作出回应。为了解决这个问题，react将vDom节点上添加了链表节点的特性，将其改造成了fiber节点（其实就是vdom节点结合了链表节点的特性），目的是为了后面的Fiber架构的实现，以实现应对并发事件的“并发模式”。事实上，原计划是17版本上的，但最终定期在了18版本。

小程序的兼容问题有哪些？

【代码】小程序路由跳转。

说说React中onClick绑定后的工作原理

但在实际应用中我们一般不直接将权限赋予在用户身上，因为这样操作对有大量用户的系统来说过于繁琐，所以我们一般基于RBAC（Role-Based Access Control）权限模型，引入角色的概念，通过角色的媒介过渡，先将权限赋予在角色上，再关联相应的用户，对应的用户就继承了角色的权限。在开发中后台应用过程中或多或少都会涉及到一个问题：权限，简单地说就是让不同的用户在系统中拥有不同的操作能力。用户与角色，角色与权限都是多对多的关系。

商城项目中有写到调用微信，支付宝支付，简单讲述一下这个支付与后台对接的过程，微信支付的原理。

vuex有一个仓库概念，将组件公共的state存储在仓库的state属性中，state是只读的，组件只能使用，不能直接修改，修改需要通过 仓库中的mutations模块来修改，这样的好处是 当数据修改便于溯源，且不会因为 多个组件 直接修改数据，导致 组件间数据的互相影响， 同时 当我们仓库中有一个state 数据需要请求 数据接口才能获取时，vuex 设计了一个action模块，在action模块中发送异步请求，得到数据后，提交mutation来修改state。

比如做后台管理中，很多模块经常会复用，比如侧边导航组件、项目中常用的 echarts图表的封装（比如折线图、柱状图等）

就是在加载页面的时候，如果页面中的图片过多，可以使用占位符的方式替换没有在可是区域内的图片，只加载当前需要现实的图片。监听滚动条的位置，当图片标签出现在可视区域的时候，重置图片的路径为真是路径，然后展示图片地址。一般在实际开发的时候都直接使用图片懒加载插件实现。还有一种解决方案就是使用页面骨架屏效果，也是类似占位显示，当数据加载完成之后替换掉占位显示的内容。

三种：默认插槽、具名插槽、作用域插槽。

导航守卫使用最多的是全局守卫 router.beforeEach 主要是用来验证用户的登陆状态。它接收三个参数 to, from, next。vue 的导航守卫一般指的是路由导航守卫，作用是在页面跳转的时候可以执行一个钩子函数。

3. 通过上述案例进一步理解MVVM。谈谈对MVVM的理解。name:‘张三丰’

vue-router和location.href的用法区别。

当我们在vue中引入第三方组件库的时候，vue组件中样式的scoped就会成为我们修改样式的阻碍，有以下三种方法修改样式，并且不影响全局样式.

网络攻击方案有哪些，自己有写过什么安全性方面的东西吗？

而采用Vue的方式开发的应用，其数据都是来源于axios或者其它的ajax方法获取的数据！也就是说，想要友好的支持搜索引擎，就必须采用服务器端渲染的相关技术，比如JSP，就是一个典型的服务器端渲染技术，用户请求一个地址然后展示到浏览器中的数据都是服务器端处理好的，浏览器只管展示；又比如静态页面，所有页面都是预先编写或生成好的，浏览器将请求拿到的数据直接展现即可。搜索引擎无法进行索引的核心原因就是，其在爬取网站数据的时候，是不会执行其中包含的JS过程的；

(2)如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容，参考vue-virtual-scroller、vue-virtual-scroll-list。(1)如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应话, 使用object.freeze(data)4、v-for遍历避免同时使用v-if （使用computed属性过滤需要显示的数据项 ）vue组件销毁时，会自动解绑它的全部指令及事件监听，但是仅限于组件本身的限制。像element-ui这样的第三方组件库可以按需引入避免体积太大。

工作中我常用的有 created、mounted、beforeDestroy 这三个，created里我常用来触发调api 接口，mounted 中我常用来执行 DOM 更新后的相关逻辑操作，比如开启定时器等，beforeDestroy 中，我常用来清除定时器、清除Vuex中缓存等。“不挖坑原则”是避免提到自己陌生的领域，而“擅引导原则”是鼓励你多提自己熟悉的领域、多提自己做过功课的领域，通过语言强调等技巧，把面试过程向有利于自己的方向引导。因此，在你“背诵”面试题的第一步，你首先要搞清楚的就是题目类型。

【代码】Vue3.0中常用的组合API有哪些？

（1）从编程范式的角度讲。（2）从组件通信的角度讲。（3）从底层原理的角度讲。

解释：先说运行结果 : 10 , 2解析:两次打印的结果, 其实fn这个函数关键点, 就在于, 我们要搞清楚, 每次执行时的this到底是谁?第一次的结果比较好辨认, fn函数尽管经过了传递,但是在第 8 行代码当中, 函数是直接调用, this显然指向window对象那么打印出来的window.length, 肯定就是10了第二次的结果, 执行函数时, 写法有所不同arguments首先是个对象第9行, arguments[0], 其实等价于 arguments.0在这里你把0看做一个属

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖。研究 async 的原理，就必须先弄清楚 Generator 是个啥。Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。形式上，Generator 函数是一个普通函数，但是有两个特征。一是，关键字与函数名之间有一个星号；二是，函数体内部使用表达式，定义不同的内部状态（在英语里的意思就是“产出”）看一个例子：上面代码中，调用

某大厂给前端面试者出了一套 TypeScript 笔试题，要求面试者在线实时答题。这种面试题考察的是应聘者的 TS 硬实力，先把题目和要求给出来，你试试能做出来几个。所有题目均为 NodeJS 环境下，TypeScript 编程题。 NodeJS 版本建议 v14 及以上。代码题以本地可以运行通过为准，Node 版本不够则无法运行高版本语法。 请提前配置好开发环境。2、依赖NodeJS 环境运行 TS 文件推荐使用 ts-node，建议提前安装。运行 运行第一题命令如下：

（1） 实现页面跳转回退保持原位置。（2） 实现页面回退之后重新加载。

● 在路由 router.js 里面声明，从后端读取用户-角色-权限信息，通过 meta 标签来标示和记录。RBAC是三个模型，两个关系：用户模型、角色模型和权限模型，用户和角色的关系、以及角色和权限的关系。你来设计一个用户-角色-权限的模型，同时以Vue为例，说说前端如何实现？超级管理员：管理员权限 + 添加、删除用户，绑定用户和角色权限。第一个表是用户模型，第二个表是角色模型，第三个表是权限模型。第四个表是用户和角色的关系，第五个表是角色和权限的关系。管理员：普通用户权限 + 修改、删除商品的权限。

● localStorage 里面的数据变化不能进行监控，如果有需求是根据 token 的变化进行操作，那 localStorage 就实现不了。● localStorage 里的数据主要用于页面重新渲染时使用，Vuex 或 Redux 里的数据在 SPA 用户操作的时候使用。● localStorage 里面存储的数据类型只能是字符串，如果存储的内容不是字符串，还需要转换，有额外的性能消耗。● localStorage 是磁盘操作，Vuex 和 Redux 是内存操作，数据存慢很多。

实现一个函数 isSimilar，对比两个字符串是否相似，相似返回 true，不相似返回 false。相似的定义是：字符串包含的字符种类以及每种字符的个数均相等。● 最后通过 comparsion 函数，比较两个字符串中相同字符的个数是否相等。● 否则定义 conversion 函数，统计两个字符串中字符的个数。● 定义 isSimilar 函数，接收两个待比较的字符串参数。● 如果传入的参数类型不是字符串返回 false。● 如果两个字符串完全相等则返回 true。

在使用表格组开发的时候，如果不对表格行进行分组的话，那么默认都属于 tbody 中，如果想要查找表格内部的单元格（td）则不能直接使用table>tr>td去查找，因为浏览器中默认会为表格进行分组：如下图：默认表格结构中没有分组标签的使用，但是在浏览器中浏览器会自动添加tbody进行分组；当您创建某个表格时，需要数据进行分区进行显示的时候，我们可以使用行分组标签。实际开发过程中，有些表格数据在浏览器中需要我们直接进行打印，但是打印的时候我们需要每一页上面均有表头，这就需要我们使用表格的分组标签来实现了。

知道的，CSS3动画主要是通过animation这个属性来进行实现，使用动画的时候需要先进行声明动画然后再去调用，哪里需要产生动画效果哪里就使用animation进行调用。

【代码】css：一个容器（页面），里面有两个div左右摆放并且高度和容器高度一致，左div不会随着页面左右伸缩而变化，右div随页面左右伸缩宽度自适应（手写）

12、结构伪类 :nth-child :first-child :last-child。3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。7、伪元素　　::first-line :first-letter。1、第一等：代表内联样式，如: style=””，权值为1000。2、第二等：代表ID选择器，如：#content，权值为0100。5、通配符、*权值为0000。8、子选择器 div>p。

【代码】前端面试及答案：boder实现0.5像素的方法。

前端面试题及答案：bfc是什么及清楚浮动的原理

(1)上拉加载是根据 page 的不断自增长，在调接口的时候获取新的数据的，如果加载出来的数据小于每页显示的数据，那么说明加载结束。上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的，以下是 mint-ui 中上拉加载更多的总结。3.如果在加载的过程中，用户继续上拉至底部触碰加载新的一页数据(上拉加载实际上是分页的一种体现)loading 是个开关，用于在加载数据过程中防止用户不断触发上来触底再次加载;(2)如果加载完数据，还需要显示没有更多数据的提示。4.脚手架 html 代码如下。

11.view:展示插入到HTML页面的主要内容,结合了Component层中的组件,Model层MainModel数据,business层的请求后台接口操作,Utils层的工具方法,VO层的配置常量,interface层的接口规范,events层因为component层组件需要数据抛发接收,更多细节请看源码ShoppingTable。7.view层和component层是可以独立拿开复用的,不去操作任何数据,只有数据进入,数据抛出，view层充当的是视图模板引擎的角色。

所谓浅拷贝，也就是说，数组或对象中的值如果是基本类型数据，那拷贝后的数据和原数据是完全没有关联，且互不影响的两个数据，如果数组或对象的值是引用类型数据的话，拷贝后的数组或对象中的引用类型的值跟原数据中的引用类型的值，还是存在共享同一地址的现象。浅拷贝，当对象或数组中的数据都是基本数据类型的时候，两个数据之间完全是独立的，如果对象或数组中的值是引用类型的时候，里面是引用类型的值，还是会保持共同的内存地址；深拷贝，就是不管原数据中值是什么类型的数据，拷贝后的新数据跟原数据是完全没有关联的。

选中以后，会出现下面这个输入框，假如你想设置.vue文件的模板，可以新建一个vue.json全局代码片段文件，输入vue.json然后回车。很多同学会有疑问，为什么我看到很多大牛的视频里面敲代码的时候，输入一个template，就会出现一大块代码。这里的prefix是你在编辑器里输入的内容，就好像创建html文件的时候，输入的英文感叹号。注意，这里的body是一个数组，每一行的内容都是数组里的每一项，并且需要用引号引起来。比方说：你在写标签的时候，一些新增的语义化标签的代码提示并不完整，嘿嘿嘿…

首先，引擎基于已确定的css规则，会给我们html中的dom分配好即将在屏幕中展示的大小(空间,受width，height等属性影响)和位置(坐标，受margin等属性影响)，截止到这一步，html和css中控制大小和位置的规则会结合生成一个称之为layout-tree的树形结构，这个结构用来描述我们的dom最终渲染的位置。当引擎读取到dom标签时，会去构建形成视图的dom-tree(你可以发现，我们所写的html文档本身就是一种树结构语法规则)，dom树自带默认的样式规则。

前端面试题及答案：请戳出ie6/7下特有的cssbug。

header——标记头部区域的内容（用于整个页面或页面中的一块区域）footer——标记脚部区域的内容（用于整个页面或页面中的一块区域）time------标签用来表示HTML网页中出现的日期和时间。meter----标签来显示该给定范围内的数据。mark-----着重标记,默认高亮背景变黄。figure----独立的文档流区域。main----主要内容区域。time------时间标签。output---- 输出框。var------倾斜标签。audio-----音频。video-----视频。