王三六-CSDN博客

原创一篇看懂web端音频

MediaRecorder出现得比较早，只不过Safari/Edge等浏览器一直没有实现，所以兼容性不是很好2.WebRTC的getUserMedia结合AudioContext（目前主流方案）WebRTC已经得到了所有主流浏览器的支持。Web Audio API 是 HTML5 提供的一组 JavaScript 接口，用于在 Web 上处理和合成音频。

2023-07-07 15:47:20 1177

原创一篇文章搞懂Typescript

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。简而言之，TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript。......

2022-08-08 10:29:04 762 1

一、前端登录案例和实现1.Cookie + Session用户首次登录时，输入账号和密码登录，服务端验证账号和密码无误后，会创建sessionid，然后将该sessionid保存到session中，服务器端响应这个http请求，通过set-cookie，将sessionid写入到cookie中，后续访问请求都会携带的cookie中的id，服务端比对cookie中的sessionid和session中的id是否一致进行验证。由于 SessionId 存放在 Cookie 中，所以无法避免 CSRF

2021-05-09 20:37:10 2747 6

原创 JS中的面向对象

一、介绍1.编程思想有三种：面向过程编程POP：分析出问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以。面向对象编程OOP：把事物分解成一个个对象，然后由对象分工与合作，每一个函数，一定会有一个原型，属性的选择性放在实例化的对象中，函数写在原型上函数式编程FP：把现实世界的事物和事物之间的联系抽象到程序里，用来描述数据之间的映射，相同的输入始终要得到相同的输出。2.优点：具有灵活性，代码可服用，容易维护和开发3.面向对象的特性：封装性

2021-04-27 21:31:57 2593

原创数组和对象的浅克隆和深克隆

（1）浅克隆：只克隆数据/对象的第一层级内容开辟新的堆内存，而第二层及以下的内容则直接引用（使用原来第二层级以下层级的堆内容），如果对其克隆后的对象二层级及以下层级进行修改时，原对象也会跟着被修改。实现浅克隆for(letkeyinobj){if(!obj.hasOwnProperty(key))break;obj1[key]=obj[key]}展开运算符letobj2={...obj1}Object.assign()（...

2021-04-27 09:14:40 442

原创手写Promise源码

一、编写步骤分解介绍*1.Promise就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行*2.Promise中有三种状态：成功fulfilled失败rejected等待pending* pending->fulfilled调用：resolve* pending->rejected调用：reject* 一旦状态确定就不可更改*3.then方法内部做的事就是判断状态，如果成功，调用成功...

2021-04-12 17:31:03 346 1

原创宏任务和微任务讲解

一、概念1.宏任务MacroTask：消息队列（回调队列）中的任务称为宏任务，是由宿主环境（浏览器或者node）提供的，不断的从消息队列中取出并被事件循环执行，宏任务在执行时，他不能获取到任务外的上下文。宏任务包含：script (可以理解为外层同步代码)，setTimeout/setInterval，setImmediate（node），requestAnimationFrame，I/O，UI rendering。2.微任务microTask：在当前主线程任务结束之后就立即执行，会在当

2021-04-11 21:26:49 590

原创 Promise详解

一、发展直接使用传统回调方式去完成复杂的异步流程，无法避免大量的函数嵌套，就会导致函数回调地狱问题，为了避免回调地狱问题，CommonJS社区提出了promise规范，目的就是为异步编程一共一种更合理更强大的解决方案，后来在ES2015中被标准化，成为语言规范，也就是ES6中的promise对象。二、概念Promise对象用于异步操作，表示一个尚未完成且预计在未来完成的异步操作。异步过后会返回成功或者失败两个状态。promise中的resolve就是将pending变成fulfilled（未

2021-04-11 16:49:55 386 2

原创 vue中常见的性能优化

一、编码优化:1.不要将所有的数据都放在data中，data中的数据都会增加getter和setter，会收集对应的 watcher，这样就会降低性能。2. vue 在 v-for 时给每项元素绑定事件需要用事件代理，节约性能。3. 单页面采用keep-alive缓存组件。4.尽可能拆分组件，来提高复用性、增加代码的可维护性，减少不必要的渲染。因为组件粒度最细，改组件的数组，它只会渲染当前的组件。5. v-if 当值为false时内部指令不会执行，具有阻断功能，很多情况下使用v-if替代

2020-12-08 09:33:04 17078

原创 vue中keep-alive的原理

一、概念：keep-alive 实现了组件的缓存，当组件切换时不会对当前组件进行卸载。常用的2个属性 include / exclude 以及max属性，2个生命周期 activated / deactivated，以及LRU算法。include 对哪些进行缓存exclude 对哪些不进行缓存max 最多缓存多少个二、原理：keep-alive是一个组件，这个组件中有三个属性，分别是include、exclude、max，在created中创建缓存列表和缓存组件的key列表，销毁的时

2020-12-08 08:56:44 11052

原创什么是作用域插槽？插槽与作用域插槽的区别

一、概念// 有name的属于具名插槽，没有name属于匿名插槽<app> <div slot="a">xxxx</div> <div slot="b">xxxx</div></app><slot name="a"></slot><slot name="b"></slot>普通插槽渲染的位置是在它的父组件里面，而不是在子组件里面作用域插槽渲染是在子组件里面1

2020-11-23 22:59:13 18490 6

原创 vue核心面试题：为什么要使用异步组件？

一、概念1.异步组件可以减少打包的结果。会将异步组件分开打包，会采用异步的方式加载组件，可以有效的解决一个组件过大的问题。不使用异步组件，如果组件功能比较多打包出来的结果就会变大。2.异步组件的核心可以给组件定义变成一个函数，函数里面可以用import语法，实现文件的分割加载，import语法是webpack提供的，采用的就是jsonp。components:{ VideoPlay:(resolve)=>import("../components/VideoPlay")}com

2020-11-13 19:17:07 3594 1

原创 vue核心面试题：Vue中相同逻辑如何抽离？

一、mixin使用vue中的Vue.mixin，给组件每个生命周期、函数等混入一些公共的逻辑。mixin可以放在全局使用，也可以放在组件中使用。vue实例化选项mixins ，extend将在init函数中通过mergeOptions合并至实例属性$options,他们的区别是extend为options对象，mixins为options数组，同时extend的方法将比mixins先执行，但他们都会在Vue.extend 与Vue.mixin之后执行。mixins:[]和extend:...

2020-11-11 20:53:11 1893 2

原创 vue核心面试题：Vue组件如何通信?

1.父子间通信源码位置：src/core/instance/events.js父->子：通过 props子-> 父：$on、$emit (发布订阅)父组件：<template> <div id="app"> <users :users="users"></users>//子组件 </div></template>export default { data(){ return

2020-10-26 20:39:48 948 2

原创 vue核心面试题：vue父子组件生命周期调用顺序

一、加载渲染过程当渲染时，会createElm创建元素，创建元素后会进行初始化，初始化组件的时候内部还有组件，会不停的去渲染，所以它的渲染顺序是先父后子，完成顺序是先子后父。...

2020-10-26 12:44:05 1631

原创 vue核心面试题：vue中v-html会导致哪些问题

一、理解：1.可能会导致 xss 攻击。比如用v-html一定要保证你的内容是可以依赖的，例：<input type="text" v-model="msg"/><div v-html="msg"></div>// 因为用户输入的信息不可信，这样输入什么就会放入什么，v-html就相当于一个innerHTML2.v-html 会替换掉标签内部的子元素二、原理 let template = require('vue-template-co.

2020-08-20 11:39:35 6262

原创 vue核心面试题：v-model中的实现原理及如何自定义v-model

一、概念1.v-model可以看成是value+input方法的语法糖。2.组件的v-model就是value+input方法的语法糖。3.可以绑定v-model的有：input，checkbox，select，textarea，radio二、源码1.组件的 v-model源码组件的 v-model是默认转化成value+input总结：在组件初始化的时候，回去判断当前数据中有没有model属性，如果有就会使用transformModel方法进行model的转...

2020-08-19 18:26:55 7679

原创 vue核心面试题：vue中的事件绑定原理

一、事件绑定有几种？1.原生的事件绑定，原生 dom 事件的绑定,采用的是 addEventListener 实现。2.组件的事件绑定，组件绑定事件采用的是 $on 方法。let compiler = require('vue-template-compiler'); // vue loader中的包let r1 = compiler.compile('<div @click="fn()"></div>'); // 给普通标签绑定click事件// 给组件绑定一个

2020-08-17 23:34:32 5464

原创 vue核心面试题：组件中的data为什么是一个函数

一、总结1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。3.当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，

2020-08-17 19:53:24 24724 3

原创 vue核心面试题：描述组件渲染和更新过程

一、概念：渲染组件时，会通过 Vue.extend 方法构建子组件的构造函数，初始化组件的时候会进行实例化。终手动调用 $mount() 进行组件挂载渲染。更新组件时会进行 patchVnode 流程.核心就是diﬀ算法。二、组件渲染流程一般组件渲染时，我们会这样写h => h(App)，app最后是一个对象，会通过一个createElement方法把这个app对象渲染成一个虚拟节点，然后调用update更新成一个真实节点。组件在渲染的时候会执行lifecycle文件中的mo.

2020-08-17 17:22:00 3821 2

原创 vue核心面试题：v-for中为什么要用key

一、v-for中为什么要用key1.vue中列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。2.key主要用来做domdiff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。3.没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，.

2020-08-14 10:41:06 20502 2

原创 vue核心面试题：diff算法

一、diff算法的时间复杂度两个树的完全的 diff 算法是一个时间复杂度为 O(n3) , Vue 进行了优化·O(n3) 复杂度的问题转换成 O(n) 复杂度的问题(只比较同级不考虑跨级问题)，因为在前端操作dom的时候了，不会把当前元素作为上一级元素或下一级元素，很少会跨越层级地移动Dom元素，常见的都是同级的比较。所以 Virtual Dom只会对同一个层级的元素进行对比。二、vue中diff算法的原理1.原理简述：（1）先去同级比较，然后再去比较子节点（2）先去判断一方..

2020-08-13 22:21:51 15866

原创 vue核心面试题：用vnode来描述一个dom结构

虚拟节点就是用一个对象来描述真实的 dom 元素，在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode例子：用js对象描述一个dom<div id="container"><p></p></div>// 下面就描述了上面的domlet obj = { tag: 'div', data: { id: 'container' }, children: [{ tag: 'p', data

2020-08-12 19:37:35 2058

原创 vue核心面试题：为什么v-for和v-if不能连用

一、理解：1.v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。如果连用的话会把 v-if 给每个元素都添加一下,会造成性能问题。一般时候把v-if放在外层，如果不符合就不去执行了。二、原理：const VueTemplateCompiler = require('vue-template-compiler');let r1 = VueTemplateCompiler.compile(`<div v-if="false"

2020-08-12 14:27:22 4654

原创 vue核心面试题：vue中的v-if和v-show

一、v-if和v-show的区别1.理解：（1）v-if 如果条件不成立不会渲染当前指令所在节点的 dom 元素，是不存在dom元素的。（2）v-show只是对当前 dom 的进行显示或者隐藏，相当于display：none或者black。（3）v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多。（4）v-if 有更高的切换开销，v-show 切换开销小。2.原理const VueTemplateCompiler = require('vue-temp.

2020-08-12 14:12:41 1229

原创 vue核心面试题：vue中模板编译原理

一、vue怎么将template 转化成 render 函数1.源码文件路径：src/compiler/index.js// 创建了一个编辑器export const createCompiler = createCompilerCreator(function baseCompile ( template: string, options: CompilerOptions): CompiledResult { const ast = parse(template.trim(),.

2020-07-15 16:41:28 2274

原创 vue核心面试题（零碎题）

一、在开发中，你将ajax请求放在哪个生命周期中1.一般ajax请求可以放置的位置在created和mounted中。2.在created的时候已经可以拿到数据，视图中的 dom 并没有渲染出来，所以此时如果直接去操 dom 节点，无法找到相关的元素。3.在mounted中，由于此时 dom 已经渲染出来了，所以可以直接操作 dom 节点。4.一般情况下都放到 mounted 中，保证逻辑的统一性，因为很多时候我们的请求会操作dom，避免出现拿不到dom的情况，放的mounted中的情况下

2020-07-10 09:39:38 523

原创 vue核心面试题（vue组件的生命周期）

概念：一、生命周期钩子在什么时候调用1.beforeCreate 在实例初始化之后，数据观测(data observer) 之前被调用。2.created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。这里没有$el ，创建完成后还没渲染到页面上。3.beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。渲染之前对template中的页面进行求值。4..

2020-07-08 11:57:23 1309

原创 vue核心面试题（Watch中的deep:true 是如何实现的）

概念：这儿的watch就是用户写的watch方法，在写watch时有两个属性一个immediate是用来确定是否立即执行方法的，另一个属性就是下来要讨论的deep，当它为true就会实现深度监听，今天我们是需求知道它怎么实现的？computed为什么没有deep:true？因为computed是用在模板里的，在模板中的数据会调一个方法JSON.strginify()，放一个对象，默认会对这个对象里的所有属性求值。原理：调用initWatch初始化watch时传入的是一个对象，在initWat

2020-06-29 23:22:47 6213

原创 vue核心面试题（computed的实现原理或特点）

概念： computed是一个计算属性,类似于过滤器,对绑定到view的数据进行处理，计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。它用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理。原理：在initState的时候会初始化initComputed，默认初始化计算属性initComputed的时候会创建一个watcher（new Watcher），这个watcher有一...

2020-06-28 23:16:47 3094

原创 vue核心面试题（nextTick实现原理）

概念：nextTick就是一个异步方法。nextTick 方法主要是使用了宏任务和微任务（事件循环机制），定义了一个异步方法，多次调用 nextTick 会将方法存入队列中，通过这个异步方法清空当前队列。所以这个 nextTick 方法就是异步方法。nextTick是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。所有放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；使用nextTick保证当前

2020-06-27 21:46:01 6629 3

原创 vue核心面试题（为什么vue采用异步渲染）

前言：因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图。 vue是组件级更新，当前组件里的数据变了，它就会去更新这个组件。当数据更改一次组件就要重新渲染一次，性能不高，为了防止数据一更新就更新组件，所以做了个异步更新渲染。（核心的方法就是nextTick）原理：当数据变化后会调用notify方法，将watcher遍历，调用update方法通知watcher进行更新，这时候watcher并不会...

2020-06-27 19:48:26 3614 1

原创 vue核心面试题（vue中如何监测数组变化）

前言：数组并没有使用Object.defineProperty重新定义数组的每个属性，vue中是怎么检测到数组的变化？数组方法（vue中改写的7个数组方法）：push，pop，shift，unshift，sort，splice，reverse理解：1.数组的方法（以上7个）都可以更改了数组的内容，然后更新就好了2.vue中对数组的原型方法进行了重写，使用函数劫持的方式，重写了数组的方法3.vue 将 data 中的数组，进行了原型链重写。通过原型链指向了自己定义的数组原型方法，.

2020-06-26 21:40:04 3851 1

原创 vue核心面试题（vue响应式数据的原理）

一、谈一下你对MVVM原理的理解1.MVC是Model-View- Controller的简写。即模型-视图-控制器。是最早的架构模型，是从前台到后台统一称之为MVC，比如前端交视图层（View），后端的数据库（Model），用户操作界面想获取数据会向后端服务器发起请求，请求会被路由拦截，这时路由会调用对应的控制器来处理，控制器会获取数据。将结果返回给前端,页面重新渲染。这种方向是单向的。2.随着前端的发展，对视图层又进行了抽离，抽离出了个VM，传统的前端会将数据手动渲染到页面上,MVVM 模..

2020-06-11 17:04:35 7036 1

原创 vue核心面试题（MVVM原理）

一、谈一下你对MVVM原理的理解1.MVC是Model-View- Controller的简写。即模型-视图-控制器。是最早的架构模型，是从前台到后台统一称之为MVC，比如前端交视图层（View），后端的数据库（Model），用户操作界面想获取数据会向后端服务器发起请求，请求会被路由拦截，这时路由会调用对应的控制器来处理，控制器会获取数据。将结果返回给前端,页面重新渲染。这种方向是单向的。2.随着前端的发展，对视图层又进行了抽离，抽离出了个VM，传统的前端会将数据手动渲染到页面上,MVVM 模..

2020-06-11 09:17:16 6164 2

空空如也

空空如也