Origin of Ray

这篇博客我们继续来看Vue3的一些新特性，包括Teleport，片段，触发组件选项。

大部分内容来自官方文档，对部分难理解的部分进行了解释与总结。

题目

给你一个points 数组，表示 2D 平面上的一些点，其中 points[i] = [xi, yi] 。

连接点 [xi, yi] 和点 [xj, yj] 的费用为它们之间的 曼哈顿距离 ：|xi - xj| + |yi - yj| ，其中 |val| 表示 val 的绝对值。

请你返回将所有点连接的最小总费用。只有任意两点之间 有且仅有 一条简单路径时，才认为所有点都已连接。

Vue3发布也有一段时间了，虽然还在beta测试，但是有些特性也可以事先了解下，这次就先看一下最重要的几个特性之一的组合式API，一种类似React Hooks的东西。

如果你了解Vue2或者说看过我以前关于Vue2源码的分析，有一个结论我现在就可以抛出：

就是Vue3的组合式API本身并没有用什么本质上的新特性，还是响应式原理那一套东西，只不过是提供了一种新的语法可以让你将强相关的一些列的data，prop，compute，method，生命周期函数封装到一起，最后将需要暴露出去的data也好，compute也好通过一个对象return出去，剩下的就和vue2没什么区别，你可以直接使用this去调用或者使用。

文章主要内容来自于Vue3迁移指南-组合式API，中间会根据自己的思路重新整理并解释。

最近看了篇关于VPN原理的文章，发现它的连接建立过程与HTTPS有点相似，并且都是对通信进行了数据加密。

在这里记录下VPN的连接建立过程，想要比较与HTTPS的区别的可以看我的另外一篇博客：https://sunra.top/posts/‘51308784’/。

这周大部分时间都是在开发一个基于Electron的客户端。

Electron内置一个chrome内核，所以可以让我们像开发一个网站一样开发客户端。

在开发过程中，遇到了一个问题，就是我们的项目需要从本地加载AI的模型并进行计算。

看过我介绍浏览器结构那篇文章的应该知道，在当前chrome结构下，网络进程与渲染进程是完全分开的，所以加载模型并不会pend住渲染进程，所以就没有在意。

但是事实证明我的页面还是会存在卡顿。

于是我就用开发者工具的Performance面板录制了一下，结果发现是模型加载完后的识别函数，它是一个Promise，属于微任务，实际上是个协程，而且是个CPU密集型的协程。

我想传递的是一种感觉

我一直和师弟师妹们说，一个知识，你不学出点哲学的意思，就不算了解它的原理，只停留在表面，别人说什么就是什么，永远停留在“器”的层面，也没法举一反三。

有的时候我们对一个知识点可以很容易地深入理解，有时候则需要和我们其他的知识点联系一下，你才能总结出它们之间的共性部分，也就是原理。

这次博客的内容也是这样的，我们初中的数学知识，数学归纳法。但不仅仅是数学归纳，还包括如何将其与我们平时的编程相互印证，找到二者的共性。

这次博客看起来很简单，但是我想传递的是一种感觉，一种思考方式。

最近在重新看cookie的配置的时候，发现了它的一个新的配置，叫做sameSite。

这个sameSite的中文翻译就是同站。

我们今天就来看一下这个同站是什么，它和同源有什么区别，为什么cookie明明都有domain和path来规定作用域了还需要sameSite这个属性。

前面几篇文章我们从调用栈和执行上下文角度讲清楚了作用域和闭包，同时讲了作用域和this的区别，现在JavaScript中最难理解的几个概念就只剩下一个原型链了。

如果我们看过《JavaScript高级程序设计》的话应该就对其中那个原型的章节有印象，它有一个非常复杂的图，通过这图来讲了JavaScript的_proto_，prototype，constructor之间的指向关系。

一开始读那本书对这一块我是似懂非懂的，终于借这次重新梳理的机会搞清楚了。

这篇博客的内容还是分为两部分：

• 通过几个公式来理清楚_proto_，prototype，constructor的指向关系。
• 原型链的使用

在以前的文章中，我们通过调用栈执行上下文讲清楚了JavaScript的作用域链和闭包的原理。

这次我们来讲一下JavaScript中另外一个非常重要的概念this。

这篇文章有两个要点，第一，this是个什么东西，第二，this指向如何判断。

在上一篇关于作用域的文章中我们通过调用栈讲什么是作用域。

每当我们调用一个函数时就会在调用栈中为该函数创建执行上下文，到目前为止我们知道了该执行上下文中有变量环境，用于存储通过var声明的变量，也有一个词法环境，词法环境又是一个栈，依次放置了函数中通过let和const声明的在不同层级的块级作用域中的变量。

基于上面的变量环境和词法环境，我们可以明白如何在一个函数的执行上下文中找到正确的变量。

那如果我们所需要的变量其实不在当前执行上下文，而是在上一级的执行上下文中呢？我们怎么确定上一级的执行上下文是哪个？

这个问题就涉及了我们今天的主题：作用域链。

理解作用域链是理解闭包的基础，而闭包在 JavaScript 中几乎无处不在，同时作用域和作用域链还是所有编程语言的基础。所以，如果你想学透一门语言，作用域和作用域链一定是绕不开的。