前言 Vue3作为一款现代的JavaScript框架，引入了许多新的特性和改进，其中包括shallowRef和shallowReactive。这两个功能在Vue3中提供了更加灵活和高效的状态管理选项，尤其适用于大型和复杂的应用程序。 Vue3的响应式系统 Vue3引入了新的响应式系统，与Vue2相比，它具有更好的性能和更多的功能。这个新系统基于Proxy，为开发者提供了更直观、灵活的API，其中包括ref、reactive、shallowRef和shallowReactive等。之前的文章写过有关响应式系统的解释，在本博客中，我们将深入探讨这两个API，并提供一些具体的例子，以便更好地理解它们...

前言 Composables称之为可组合项，熟悉react的同学喜欢称之为hooks，由于可组合项的存在，Vue3中的组件之间共享状态比以往任何时候都更容易。这种新范例引入了一种更有组织性和可扩展性的方式来管理整个应用程序的状态和逻辑。 什么是Composables 本质上，可组合项是一种模式而不是特定的功能。它是通过一个简单的函数来实现的，该函数可以保存状态和可重用的代码。总的来说:可组合项是可重用的有状态函数。它们可用于在组件之间共享响应式状态和逻辑。 如何定义 下面通过一段代码看看什么是可组合项: import{ref}from'vue'; //定义可组合项需以use开头比如useXX...

前言 ECMAScript2023引入了一些新功能，以改进语言并使其更加强大和无缝。这个新版本带来了令人兴奋的功能和新的JavaScript数组方法，使使用JavaScript编程更加愉快和轻松。本文将带领读者全面了解JavaScript数组原型上的新方法。 什么是ECMAScript? ECMAScript是一种标准化的脚本语言，它是JavaScript的规范。ECMAScript2023是JavaScript编程语言的更新，旨在带来改进并使JavaScript程序可预测和可维护。 ECMAScript2023引入的新方法 toReversed() toReversed()与reverse(...

当我们在编写TypeScript代码时，经常会遇到需要通用（Generic）的情况，这时候，泛型就是我们的好帮手了。在本篇文章中，我们将深入介绍TypeScript泛型的概念以及如何使用。 什么是泛型？ 在编程语言中，泛型指的是参数化类型的概念。也就是说，我们可以定义一个函数、接口或类等，能够处理不同类型的数据，而不是只能处理一种类型的数据。这使得我们的代码更加灵活、通用、可复用。 下面是一个简单的泛型函数的例子： functionidentity<T>(arg:T):T{ returnarg; } letoutput=identity<string>("hellow...

前言 Vue3是一个功能强大的前端框架，它引入了一些令人兴奋的新特性，其中最引人注目的是ref和reactive。这两个API是Vue3中响应式编程的核心，本文将深入探讨它们的用法和差异。 什么是响应式编程？ 在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新，反之亦然。这种机制大大简化了前端开发，使我们能够专注于数据和用户界面的交互，而不必手动处理DOM更新。 Ref ref是Vue3中的一个简单响应式API，用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型，只不过底层还是由reactive的方式实现的)。它的主要优点是能够轻松包装基本数据类型，...

一文搞懂JavaScript数组中最难的数组API——reduce() 前面我们讲了数组的一些基本方法，今天给大家讲一下数组的reduce(),它是数组里面非常重要也是比较难的函数，那么这篇文章就好好给大家介绍下reduce函数。还是老样子，我们直接在应用中学习，直接上例子。让我们先定义一个包含几个对象的数组，注意观察下这个数组，可以看到里面有两个对象的age都是30。(下面会用到) //一个包含几个人物对象的数组。 constpeople=[ {name:"John",age:20}, {name:"Jane",age:22}, {name:"Joe",age:23}, {name:"Jac...

JavaScript词法环境 本文主要讲解JS词法环境，我们将看到什么是词法环境，词法范围如何工作，函数内部的名称如何解析，内部属性，弄清楚词法环境利于我们理解闭包。让我们开始吧... 什么是词法环境？ 在理解闭包时，最大的混淆来源是术语“词汇环境”，或者只是“词汇”这个词。在计算机科学中术语“词汇”仅表示“源代码”，或者换句话说，“与写的代码有关”。大家请考虑以下代码： vara='static'; functionf1(){ console.log(a); } functionf2(){ vara='dynamic'; f1(); } f2(); 仔细考虑，大家觉得会输出什么？正...

前言 在JavaScript中，对象是一种非常常见的数据类型，几乎每个程序员都会在日常工作中频繁地使用对象。在本篇文章中，我们将深入了解JavaScript对象的一些基本概念和一些高级概念，这些概念对于我们正确理解对象在JavaScript中的行为非常重要。 对象的基本概念 在JavaScript中，对象是由键值对组成的集合。键是一个字符串或者Symbol类型的值，值可以是任何类型的数据，包括其他对象。对象是一种动态数据结构，可以通过添加、删除或修改属性来改变对象的状态。以下是JavaScript中定义对象的一些基本语法： constmyObj={ key1:'value1', key2:'v...

前言 JavaScript原型是该语言中一个非常重要的概念。理解原型是理解JavaScript的关键。在本篇技术博客中，我们将深入探讨JavaScript的原型概念，并介绍常用的操作对象原型的方法。(欢迎点评,欢迎指正!) 什么是原型？ 在JavaScript中，每个对象都有一个原型（prototype）对象。原型可以看做是对象的“父类”，包含了一些共有的属性和方法。当我们试图访问对象的属性时，JavaScript首先查找该对象本身是否有该属性，如果没有，就会在该对象的原型中查找，如果还没有，就会一直沿着原型链(也可理解为原型对象的原型对象)向上查找，直到找到该属性或者查找到原型链的顶端为止。...

前言 在JavaScript中，apply、bind和call是三个重要的函数，它们都是Function.prototype的方法。这些函数可以让我们动态地改变函数的this值，或者传递参数来执行函数。本篇博客将详细介绍apply、bind和call的使用方法以及它们之间的区别。 apply apply()方法是Function.prototype上的一个方法，可以用于改变函数的this值。它接受两个参数：第一个参数是要绑定的this值，第二个参数是一个数组，其中包含要传递给函数的参数。apply()方法会立即执行函数。 functionaddNumbers(a,b,c){ returna+...