Menu

前端

前端开发相关笔记,包括一些开发经验和代码。

WEB漏洞攻击XSS、CSRF、SSRF的概念和防御

XSS,CSRF,SSRF三种常见的Web服务端漏洞均是由于,服务器端对用户提供的可控数据过于信任或者过滤不严导致的。 XSS,CSRF,SSRF区别 XSS:(跨站脚本攻击)是服务器对用户输入的数据没有进行足够的过滤,导致客户端浏览器在渲染服务器返回的html页面时,出现了预期值之外的脚本语句被执行。通常指黑客通过 HTML 注入 篡...

Babel原理,SWC和ESBuild优势,Polyfill作用

ECMAScript 发展困境 JavaScript这门语言受限于历史因素,有许多问题,其中一个就是新的语言特性始终无法在浏览器中得到全面支持与应用。 如果你要写一个支持绝大多数浏览器的网页,最好的选择可能就是ES5了,但你要知道ES5之后,JavaScript也一直在不停的更新,其中最重要的一个版本是ES 6,而到今年2022年,已经是ES 2...

Vue3.x 与 Vue2.x 插槽区别

1、基本用法 基本用法基本是相同的,没有什么改动,vue3和vue2都可以这样用 2、具名插槽 具名插槽两者用法有稍微不同,Vue3使用v-slot:[name](缩写#[name]),而Vue2用的是slot="name" vue3写法 vue2写法 这里有两点需要注意 vue3在父组件中使用具名插槽使用v-slot,而vue2使用slot vue3必须把v-slot写在template标...

Vite 构建工具常用知识点总结

1. 何为vite 法语意为 “快速的”,发音 /vit/,同 “veet”。 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成: 一个开发服务器,它基于 原生 ES 模块 (ESM)提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。 一套构建指令,它使用 Rollup 打包你的代码,...

React 基础与核心总结(理论篇)

1. 如果你是leader,做管理系统项⽬ Vue和React 怎么选择? 评估项⽬成员的⽔平,如果成员js基础较好、编码能⼒较强则选择React,否则Vue。 评估系统的⼤⼩,如果想构建⽣态系统,则选择React,如果要求快速,则选择Vue。当然现在Vue3.x在对Vue2的性能优化之后,开发大型复杂的项目的性能也更好了。 评估系统运⾏环境,...

Vue3.x重点知识总结—基础篇(一)

1. Vue3.0升级了哪些重要的功能? createApp:创建vue实例的⽅式 emits属性,组件中的事件要先使⽤emits进⾏声明,然后在setup的形参引⼊ ⽣命周期 多事件 fragment:不再限制唯⼀根节点 移除.sync: 异步组件的写法:Vue2 直接import进来,Vue3需要使⽤defineAsyncComponent包裹⼀层 移除filter 新的组件:Fragment(⽚...

Vue3.x重点知识总结—基础篇(响应式API的理解)

1. reactive 对比 ref 1)从定义数据角度对比 ref用来定义:基本类型数据。 reactive用来定义:对象(或数组)类型数据。 备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象。 2)从原理角度对比 ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)。 reactive通过...

Vue3.x重点知识总结—理论篇(Vue3的优势)

一、Vue3相比与Vue2的优势 1. 速度更快、性能更好 1) 基于Proxy的新响应式系统(数据劫持优化) Vue3.0如何实现响应式? 由原来的Object.defineProperty的getter 和setter,改成了ES6 Proxy 作为其观察机制(准确说是 Proxy 配合 Reflect,Reflect提供了一些操作Object对象的方法),初始化时无需递归遍历数据,初始化效...

React 基础及核心总结/三

1. 原生属性的改写和差异 在 React 中,所有的 DOM 特性和属性(包括事件处理)都应该是小驼峰命名的方式。例如,与 HTML 中的 tabindex 属性对应的 React 的属性是 tabIndex,再比如readOnly和。例外的情况是 aria-* 和 data-* 属性以及自定义的属性,一律使用小写字母命名。比如, 可以用 aria-label 作为 aria-label。...

React 基础及核心总结/二(组件篇)

1. 内置组件 除HTML原生标签外,React还有一些内置的组件。 1)<React.StrictMode> 严格模式。StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。 Ps:严格模式检查仅在开发模式下运行;它们不会影响生产构建。 你可以为应用程序的任何部分启用严格模式。 2)<React.Fragment> 是一个...