Cshaosun-CSDN博客

原创简说是什么虚拟DOM （Virtual DOM ）

虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）。因为很多人是在学习 React 的过程中接触到的虚拟 DOM ，所以为先入为主，认为虚拟 DOM 和 JSX 密不可分。

2024-07-26 16:29:27 366

Vue与React都使用了 Virtual DOM + Diff算法，不管是Vue的Template模板+options api 写法，还是React的Class或者Function写法,最后都是生成render函数，而render函数执行返回VNode(虚拟DOM的数据结构，本质上是棵树)对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

2024-07-26 14:47:46 368

转载 vue 组件之间相互传值的6种方法

实现了数据从子组件向父组件的传递，遵循响应式设计原则。只能实现相邻组件之间的通信，对于多层级嵌套组件间的通信较为复杂。如果组件间交互复杂，可能会导致大量自定义事件的使用，影响代码可读性和可维护性。

2024-07-23 14:29:05 23

原创 VUE 子组件可以直接改变父组件的数据吗

如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。

2024-07-23 10:46:58 355

原创 VUE之---slot插槽

slot【插槽】，是 Vue 的内容分发机制，组件内部的模板引擎使用slot 元素作为承载分发内容的出口。slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。

2024-07-22 10:50:59 995

原创数据类型检测的方式有哪些

Object.prototype.toString.call() 使用 Object 对象的原型方法。可以用来测试一个对象在其原型链中是否存在一个构造函数的。返回的结果结构是[object 数据类型]，因此简单封装。通过ES6的Array.isArray()constructor 是每个。对象访问它的构造函数（实例的。基本类型封装成对象后才返回。属性，指向构造函数本身）；的类型，其内部运行机制是。在对值类型number。（1）判断数据的类型；

2024-07-16 16:59:18 370

原创扩展运算符（...）的作用及使用场景

同样，如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中，这里。，将原对象（source）的所有可以枚举属性，复制到目标对象（target）。(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。(如果将扩展运算符用于数组赋值，

2024-07-16 15:53:51 124

原创 js[数组、对象数组去重和删除指定值]；[判断空对象]

特点:创建一个空 Map 数据结构，遍历需要去重的数组，把数组的每一个元素作为 key 存到 Map 中。由于 Map 中不会出现相同的 key 值，所以最终得到的就是去重后的结果。特点:新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则 push 进数组。方法会删除数组中的最后一个元素，并返回该元素的值；特点:不考虑兼容性，这种去重的方法代码最少。方法会删除数组中的第一个元素，并返回该元素的值；当你想要删除特定的值时，这种方法更加简洁。

2024-06-25 17:00:08 522

原创 JavaScript 导致内存泄漏的场景和规避方法

在日常开发中，我们经常会无意识一些操作导致内存溢出。为此我总结一下内存溢出的几种场景供大家参考。希望能在优化自己代码的道路上有所帮助。

2024-06-19 17:03:36 687

原创对this对象的理解

This 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。this的值并不是在函数定义时确定的，而是在。在实际开发中，this 的指向一般可以通过四种调用模式来判断。

2024-05-20 14:24:12 400

原创 call、apply、bind三者的区别

三者都可以改变函数的 this 对象指向。三者第一个参数都是 this 要指向的对象，如果如果没有这个参数或参数为 undefined 或 null，则默认指向全局 window。三者都可以传参，但是 apply 是数组，而 call 是参数列表，且 apply 和 call 是一次性传入参数，而 bind 可以分为多次传入。bind 是返回绑定 this 之后的函数，便于稍后调用；apply 、call 则是立即执行。

2024-05-13 14:52:02 521

原创对Promise的理解

可以获取异步操作的消息，它的出现大大改善了异步编程的困境，，它比传统的解决方案回调函数和事件更合理和更强大。Promise的实例有。

2024-05-11 15:26:58 607

原创 js异步编程的实现方式

这是异步操作最原始的用法。是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数。

2024-05-08 15:45:53 500

原创 JS 实现继承的几种方式

现在有parent、child两个函数，child函数的实例想要访问parent函数的属性和方法（child想要继承parent）。

2024-05-07 16:39:05 520

原创 includes()、startsWith()、endsWith()、indexOf()、lastIndexOf()介绍

includes()、startsWith()、endsWith()是新增的方法includes()、startsWith()、endsWith()的index表示从哪个位置查找【不写以字符串开头查找】）

2024-04-30 10:35:33 368

原创 for...in 和 for...of 的区别

for...of是ES6新增的遍历方式，允许遍历一个含有 iterator 接口的数据结构（数组、对象等）并且返回各项的值。

2024-04-26 17:31:29 316 1

原创 ES6 模块与 CommonJS 模块有什么异同

而 CommonJS 的模块导入则是通过值拷贝的方式来实现的，即每个变量都拷贝了一份导出变量的值。这意味着如果在 ES6 的模块中修改导出变量的属性，那么其他导入该变量的模块也会受到影响，而在 CommonJS 中则不会。ES6 的模块化适用于浏览器端和 Node.js 中使用，它采用了异步导入、编译时静态分析等技术，使得代码可读性更好，依赖关系更清晰，能够有效提高代码执行效率。而 CommonJS 则更适合于服务器端，因为 Node.js 中使用的大部分第三方模块都是基于 CommonJS 规范的。

2024-04-26 16:48:38 269

原创 escape、 encodeURI、 encodeURIComponent 三种编码方式的区别

如果要编码 URL ，但需要跳转地址，那只能用 encodeURI 方法，因为encodeURIComponent 会对 :/ 进行编码，会导致没法跳转地址。和 #，则应当使用 encodeURIComponent() 方法分别对各组件进行编码。编码之后的效果：%XX 或 %uXXXX这种形式。函数是对字符串进行编码的，作用是让他们在所有电脑上可见。ASCII字母、数字、~!方法生成新的由十六进制转义序列替换的字符串。进行编码的，唯一的区别是编码的范围不一样。ASCII字母、数字、~!

2024-04-24 16:25:26 199

原创对JSON的理解

json是一种轻量级的数据交换格式json采用完全独立于计算机语言和操作系统的平台，不同的编程语言和操作系统json数据是一致的。

2024-04-24 14:55:10 175

原创 ES6之---Proxy简介

ProxyProxy是JavaScript中的内置对象，它提供了一种机制，可以拦截并自定义各种操作，如属性访问、函数调用、构造函数调用等。Proxy的构造函数接受两个参数目标对象（被代理的对象）和一个处理器对象（用于定义拦截器）。// 写法:target是目标对象，handler是处理器对象。

2024-04-24 10:59:28 389

原创 JavaScript 中的包装类型

在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象JavaScript提供了三种包装类StringNumberBoolean。1、String包装类可以在字符串上调用各种方法，如等。// 输出 "HELLO WORLD"尽可能使用基本数据类型而不是对象包装器。明确了解自动装箱和拆箱的行为，以便明确何时发生转换。使用===

2024-04-22 11:02:13 828

原创 Object.is() 与比较操作符 “ ===” 、 “ ==” 的区别

都是比较两个值的相等性的。

2024-04-19 16:19:58 216

原创如何获取安全的 undefined 值？

你可以为参数提供默认值。这样，如果调用函数时没有提供该参数的值，函数将使用默认值。

2024-04-19 10:23:57 470

原创 JavaScript 有哪些数据类型

JavaScript 共有 Undefined、 Null、 Boolean、Number、 String、 Object、 Symbol、 BigInt八种数据类型。注：Symbol 和 BigInt 是 ES6 中新增的数据类型（1）Undefined：【未定义/未初始化】此类型只有这一个值，当声明的变量未赋值时，就相当于赋值了Undefined。（2）Null：【空对象】Null只有一个值，null表示一个控制值对

2024-04-18 15:01:07 1128

原创 VUE修改组件props中的值报错Avoid mutating a prop directly since the value will be overwritten whenever the par

报错信息：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "showPromptMes"Vue2.0 中组件props中的数据只能单向流动，即只能从父组件通过组件的D

2024-04-17 14:48:42 301

Cshaosun的博客