水果摊见-优快云博客

原创 [vue]diff算法

Vue是基于依赖收集完成的响应式，当一个节点发生改变时，它相关的节点都会被更新。如果对所有的组件都进行更新，那么对性能的影响是很大的，如果可以找出其中不需要更新的地方，只更新需要更改的部分，那么性能也会得到较大的提升，这就是diff算法存在的必要性。通过新旧 vnode 比对，从而找到实际需要更新的结点，再进行更新，这个过程称为 patch。

2024-12-09 16:07:49 1104

原创 [Vue3]computed原理

总结来说，computed在第一次get的时候在内部收集了依赖，并将内部缓存开关设为了false，此后只有在依赖改变的时候，才会将内部缓存开关设为true，从而使computed的值发生改变。

2024-12-05 15:58:12 973

ref功能主要是收集依赖和触发依赖的过程。实现reactive功能reactive主要是让对象也可以进行依赖的收集，这就需要为对象的每一个key创建对应的Dep。简易版Vue雏形使用上面的reactive和effectWatch功能可以实现miniVue的雏形优化将代码抽离，effectWatch在框架中调用，视图的清空和append也在框架中调用优化并使用虚拟Dom在上面的代码中，每次都会更新所有节点，需要进行优化，只更新变化的节点将节点关键信息转化成一个对象。props是一个对象，

2024-12-05 14:43:20 405

原创 [Vue]Vue3

（1）监测机制的改变3.0 将带来基于代理 Proxy的 observer 实现，提供全语言覆盖的反应性跟踪。消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制：（2）只能监测属性，不能监测对象检测属性的添加和删除；检测数组索引和长度的变更；支持 Map、Set、WeakMap 和 WeakSet。（3）模板。

2024-12-04 17:48:02 883

原创 [Vue]生命周期和虚拟DOM

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程，称这是Vue的⽣命周期。beforeCreate（创建前）：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。

2024-12-04 17:37:25 503

原创 [Vue]Vue-router

（1）param方式配置路由格式：/router/:id传递的方式：在path后面跟上对应的值传递后形成的路径：/router/1231）路由定义2）路由跳转3）参数获取通过 $route.params.userid 获取传递的值（2）query方式配置路由格式：/router，也就是普通配置传递的方式：对象中使用query的key作为传递方式传递后形成的路径：/route?id=1231）路由定义2）跳转方法3）获取参数。

2024-12-03 18:09:46 866

原创 [Vue]依赖收集

computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。运用场景：当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。

2024-12-03 15:35:26 832

原创 [Vue]template相关

可以。

2024-12-03 14:50:36 756

原创 [Vue]基础概念

当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

2024-12-03 11:31:17 582

原创 [Vue]组件之间通信

（1）父子组件间通信子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。通过 ref 属性给子组件设置一个名字。父组件通过$refs组件名来获得子组件，子组件通过$parent获得父组件，这样也可以实现通信。使用，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。（2）兄弟组件间通信。

2024-12-03 10:00:00 913

原创【浏览器】从输入 URL 到页面展示，这中间发生了什么？

用户输入URL1）浏览器会根据用户输入的信息判断是搜索还是网址，如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，在这段内容上加上协议合成合法的URL。2）回车前，当前页面执行 onbeforeunload 事件；3）用户输入完内容，按下回车键，浏览器导航栏显示loading状态，但是页面还是呈现前一个页面，这是因为新页面的响应数据还没有获得。URL请求。

2024-12-02 10:00:00 1078

原创【浏览器】进程与线程

例如信号量的初始值是 1，然后 a 进程来访问内存1的时候，我们就把信号量的值设为 0，然后进程b 也要来访问内存1的时候，看到信号量的值为 0 就知道已经有进程在访问内存1了，这个时候进程 b 就会访问不了内存1。正是因为进程之间的数据是严格隔离的，所以一个进程如果崩溃了，或者挂起了，是不会影响到其他进程的。如果程序很多时，内存可能会不够，操作系统为每个进程提供一套独立的虚拟地址空间，从而使得同一块物理内存在不同的进程中可以对应到不同或相同的虚拟地址，变相的增加了程序可以使用的内存。

2024-12-01 10:00:00 995

原创【浏览器】构成与渲染原理

Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。

2024-11-30 10:00:00 949

原创【浏览器】缓存与存储

Web Storage是为了更大容量存储设计的。Cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽；cookie 需要指定作用域，不可以跨域调用；Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端开发者自己封装 setCookie，getCookie；

2024-11-29 14:32:22 1277

原创【浏览器】安全

XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。获取页面的数据，如DOM、cookie、localStorage；DOS攻击，发送合理请求，占用服务器资源，从而使用户无法访问服务器；破坏页面结构；流量劫持（将链接指向某网站）；

2024-11-28 16:36:02 579

原创【JS】面试八股文

答：在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象，如：在访问时， JavaScript 将'abc'在后台转换成，然后再访问其length属性。这就是包装类型。包装类型可以使用valueof进行开箱，转成基本类型。答：在当前作用域中查找所需变量，但是该作用域没有这个变量，那这个变量就是自由变量。

2024-11-26 23:17:31 859

原创【JS】异步编程

异步编程的四种方式：1，回调函数：先执行程序的主要逻辑，将耗时的操作推迟执行。简单、易理解，但不利于代码维护2，事件监听：任务的执行不取决与代码的顺序，取决于事件是否发生。可绑定多个事件，每个事件可指定多个回调函数，有利于实现模块化，但流程会不清晰3，发布/订阅（观察者模式）：有一个信号中心，某个信号执行完成后，向信号中心publish一个信号，其他任务则向信号中心订阅这个信号，从而知道自己什么时候开始执行。可通过查看消息中心，了解存在多少信号及每个信号的订阅者，从而监控程序的运行。

2024-11-14 10:00:00 1101

原创【JS】事件循环

promise内部有resolved_和rejected_变量保存成功和失败的回调，进入时会判断rejected参数是否为函数，若是函数，错误时使用rejected处理错误；若不是，则错误时直接throw错误，一直传递到最后的捕获，若最后没有被捕获，则会报错。可通过监听事件捕获未处理的promise错误。定时器检测阶段(timers)：本阶段执行timer的回调，即setTimeout里面的回调函数。

2024-11-13 16:23:04 847

原创【JS】对象与原型

在ECMAScript-262中，对象被定义为无序属性的集合，其属性可以包含基本值，对象或者函数。也就是说，在JavaScript中，对象无非就是由一些列无序的key-value对组成。其中value可以是基本值，对象或者函数。从技术角度来说，函数永远不会“ 属于” 一个对象，它们只是对于相同函数对象的多个引用。无论返回值是什么类型，每次访问对象的属性就是属性访问。如果属性访问返回的是一个函数，那它也并不是一个“ 方法”。内置对象JavaScript。

2024-11-12 11:00:00 764

原创【JS】类与继承

可以理解为在原型式继承的基础上包了一层特殊的壳，是原型式继承的加强版，即在产生了这个继承了父类的对象之后，为这个对象添加一些增强方法。函数内部，先创建了一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例。是指：在继承链的不同层次中，一个方法可以被定义多次，调用方法时回自动选择合适的定义（取决于使用了哪个类的实例）。（涉及到原型的动态性）对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。

2024-11-11 14:38:48 867

原创【JS】内置类型的相关问题

实际上，使用常量和使用构造函数的效果是一样的（创建的值都是通过封装对象来包装）。类型的相关知识包含内置类型的判断、类型转换、基础类型的装箱与开箱等，面试时候作为基础知识考察。被称为不是数字的数字，用于指出数字类型中的错误情况，即“执行数学运算没有成功，这是失败后返回的结果”。中字符串是不可变的，这是指字符串的成员函数不会改变其原始值，而是创建并返回一个新的字符串。中的数字类型是基于 IEEE 754 标准来实现的，该标准通常也被称为“浮点数”。f方法，如果有并且返回基本类型值，就使用该值进行强制类型转换。

2024-11-09 10:00:00 759

原创【JS】this关键字的应用

他解释了为什么要使用动态函数，就如同我们上边所讲的那样，是为了保证length属性的合理值。中，描述了很多this的原理和应用，这一篇查缺补漏，还包括了一些古老用法，大概七八年前常考吧。同时，将第一个参数（context）以外的其他参数，作为提供给原函数的预设参数，这也是基本的“颗粒化（curring）”基础。就是当前组件实例，所以，为了方便将来的调用，往往在构造函数中将这个实例的特定函数绑定。标准语法的一部分，所以，虽然这种写法看起来很简洁，但并不推荐使用它。所实现的那样），就面临尴尬的局面。

2024-11-08 10:00:00 609

原创【JS】this关键字的相关问题

`this`提供了一种优雅的方式来隐式传递一个对象引用，API可以设计的更加简洁且易于复用。如果不用this的话，就必须给一些函数显式传入上下文对象。`this`使得函数可以自动引用合适的上下文对象。

2024-11-07 22:52:11 727

原创【JS】声明提升与块级作用域

函数声明和变量声明都会被提升到最上面函数声明如果重复，以最后一个为准，变量声明如果跟函数名称重复，变量声明无效，以函数声明为准生成代码过程就是编译器把程序分解成词法单元(token)，然后把词法单元解析成语法树(AST)，再把语法树变成机器指令等待执行的过程。相比普通函数，JavaScript 函数的主要复杂性来自于它携带的“环境部分”。当然，发展到今天的 JavaScript，它所定义的环境部分，已经最初的定义复杂了很多。

2024-11-06 14:18:46 762

原创【JS】作用域、执行上下文与闭包

作用域其实是一种规则，规定了一门语言在定义和运行的时候，变量有效的范围，以及如何找到这个变量。JS中分为全局作用域、函数作用域和块作用域，定义的变量可以在其相应的作用域中使用和复用；变量会在其定义时的作用域进行查找，而不是运行时的作用域进行查找。了解作用域的定义之后，来看看一个JS程序是如何应用作用域来运行起来的。在JS中，一个函数被调用时会生成执行上下文，并将其放入函数调用栈中。执行上下文包含了变量对象与作用域链，用于寻找变量的值，编译后会变成可执行代码。

2024-11-05 18:40:46 1037

原创 [Vue3]响应式原理

而Vue中会使用一个内部的effect函数将相关依赖收集，这个过程对用户是无感的。对象时，Vue会把相关的effect收集起来，而对象发生改变时会触发所有的相关依赖。是对对象的一个属性的获取和修改进行拦截的，它的缺点就是要先有一个对象的属性，也不支持数组的监听。作为对象的构造函数，承担了太多额外的属性和方法，需要将他们单独提取出来，更加规范化的同时也让。而它们的第二个参数是type，是当前收集的类型，这个后续再说。是ES6中的一个类，它可以代理对一个对象的操作，即经过。对象的依赖收集和触发依赖的实现。

2024-07-26 15:44:13 687

空空如也

空空如也