Onlyy🦄

我们知道，一般用reactive来定义一个响应式对象，ref常用来定义一个响应式的原始值。上篇文章已经聊过了reactive，知晓了如何通过Proxy来对目标对象进行代理从而实现响应式，而非对象的这些原始值的响应式问题就交给ref来解决了。 一、ref 和 shallowRef的函数签名ref和shallowRef各有三种重载，入参各不相同，都返回一个Ref/ShallowRef类型的值。通过createRef函数创建一个响应式的值。和 reactive 相似，reactive也是通过调用createReactiveObject来创建一个响应式的对象。而createRef创建并返回一个 RefImpl 实例。 1234567891011121314151617181920212223242526272829// refexport function ref<T extends object>( value: T): [T] extends [Ref] ? T : Ref<UnwrapRef<T>>;export function ref<T& ...

想起上次面试，被问了个古老的问题：watch 和 computed 的区别。多少有点感慨，现在已经很少见这种耳熟能详的问题了，网络上八股文不少。今天，我更想分享一下从源码的层面来区别这八竿子打不着的两者。上一篇看了watch的源码，本篇针对computed做分析。 一、类型声明computed的源码在reactivity/src/computed.ts里，先来看看相关的类型定义： ComputedRef：调用computed得到的值的类型，继承自WritableComputedRef； WritableComputedRef：继承自Ref，拓展了一个effect属性； ComputedGetter：传递给ComputedRef的构造器函数，用于创建effect； ComputedSetter：传递给ComputedRef的构造器函数，用于在实例的值被更改时，即在set中调用； WritableComputedOptions：可写的Computed选项，包含get和set，是computed函数接收的参数类型之一。 1234567891011121314151617181920212 ...

一、XMLHttpRequest 对象所有现代浏览器都支持通过XMLHttpRequest构造函数来原生支持XHR对象：const xhr = new XMLHttpRequest()。 1. 使用XHR使用XHR第一步便是调用open()方法，其接收三个参数：请求的类型(如get)，url，以及一个布尔值表示请求是否为异步。例如，xhr.open('get', 'www.baidu.com', false) 表示将要向www.baidu.com发送一个同步的get请求。有两点需要注意： 这里得第二个参数url一般是相对于当前页面的，不过也可以使用绝对URL； 调用open()方法只是进行初始化，并不会立即发送请求，而是为发送请求做准备，真正开始发送请求还需要调用send()方法。 send()方法接收一个参数，表示作为请求体发送的数据。xhr.send({username: 'cc', pwd: 'lovecake'})。如果不需要请求体，则必须传入null：xhr.send(null)。调用se ...

自ES6中symbol问世以来，个人在项目中并没有太多机会使用到，小公司业务项目没有给symbol太多的登场机会。因此之前也只稍微知晓了概念，没有详细了解。如今重温js，自然要重新认识一下这独一无二的symbol。如你所知，symbol是原始值(基本数据类型)，其每个实例是独一无二且不可变的，一般作为对象属性使用，确保对象属性独一无二，避免属性冲突。 [toc] 1. 基本用法符号只能通过函数来创建实例。最基本的就是Symbol()函数：可以使用Symbol()函数来创建一个符号实例。有以下几点需要注意： Symbol()函数不与new操作符搭配，即new Symbol()是不合法的。这是为了防止创建Symbol包装对象； Symbol()函数可以传入字符串作为键（也可以不传），此时传入的字符串键只起到描述的作用，并不影响symbol实例的值。因此，传入相同的字符串键的symbol实例，其值也不相等而且相互之间也没啥关联。 12345let symbol1 = Symbol("a");let symbol2 = Symbol("a");// ...

一、函数式编程的出现 发展史：命令（脚本）式 -> 面向对象 -> 函数式编程 1. 从实际问题开始123456789101112131415161718192021222324252627// 1.数组在 `url` 中展示形式location.search => '?name[]=progressive$%coding&name[]=objective$%coding&name[]=functional$%coding'// 2.参数提取拼接成数组['progressive$%coding', 'objective$%coding', 'functional$%coding']// 3. 手写方法，转换成数组对象// [{name: 'Progressive Coding'}, {name: 'Objective Coding'}, {name: 'Functional ...