elysiaEgo's Blog

现代Web技术（一）——WebAssembly什么是WebAssemblyMDN 官方解释对于应用开发者，可以将WebAssembly看作一种IR（中间语言），类似于Java的字节码，C#的IL，LLVM IR，可以在浏览器中解释并运行。浏览器通过将WebAssembly编译成本地代码，提高性能的同时还能够跨平台。 为什么要使用WebAssemblyWebAssembly的性能比JavaScript更高，可以实现更复杂的计算任务。在传统场景中，复杂的计算任务一般交由JS worker线程处理，但worker不会提升性能，只是将任务从主线程中分离出来。随着Web应用的发展，更多需求放在前端，使得Web应用更加复杂。WebAssembly可以提供更好的性能，使得Web应用可以处理更多的任务。同时，Emscripten等工具可以将C/C++等语言编译成WebAssembly，使得WebAssembly可以更好的与现有的代码库结合。通过这种方式，核心业务代码可以实现真正意义上的多端运行。 WebAssembly的缺点WebAssembly相比于在宿主机的本地代码，内存布局大不相同 ...

计算机科学与技术专业笔记本选购指南Ver 2024.1.previewCopyright (c) elysiaEgo 2024 本文在CC BY-NC-SA 4.0协议下分发以下内容只代表个人意见，不对笔记本质量提供任何形式的担保 先说结论 Macbook只买M4，没用过Macbook进行开发不要买Macbook，哪怕你手机是苹果 计算机专业只对CPU和内存有要求，如果后续需要跑AI，学校有计算卡，显卡性能不是必要的 一线品牌：华硕，1.5线品牌：联想、惠普、华为/荣耀、小米/红米、微星，二线品牌：七彩虹、机械革命（仅供参考） 建议参考笔吧评测室的选购指南 预算有限直接机械革命 / DIY主机 / 1.5线以上品牌轻薄本 不要去线下电脑城/电脑店购买。不要通过熟人购买（可以推荐型号，但是购买一定要你自己来） 预备知识CPU命名规则AMD以表格形式呈现。需要注意的是AMD的新款CPU有诸多马甲，有时候数字大，而本质却是上一代的芯片，建议结合CPU排行榜判断性能 新款命名目前只有三款，数字越大越好AMD Ryzen™ AI 9 HX 375AMD Ryz ...

Phase 1123456789101112131415.text:00000000004017A8 ; unsigned int __cdecl getbuf().text:00000000004017A8 public getbuf.text:00000000004017A8 getbuf proc near ; CODE XREF: test+9↓p.text:00000000004017A8.text:00000000004017A8 buf = byte ptr -28h.text:00000000004017A8.text:00000000004017A8 ; __unwind {.text:00000000004017A8 sub rsp, 28h.text:00000000004017AC mov rdi, rsp ; dest.text:00000000004017 ...

通读main函数，可以轻易发现每个阶段是调用phase_n函数进行。 Phase 1123456789101112131415public phase_1phase_1 proc near ; CODE XREF: main+9A↑p; __unwind {sub rsp, 8 ; Integer Subtractionmov esi, offset aBorderRelation ; "Border relations with Canada have never"...call strings_not_equal ; Call Proceduretest eax, eax ; Logical Comparejz short loc_400EF7 ; Jump if Zero (ZF=1)call explode_bomb ; Call Procedure; ------------------ ...

Vue是如何创建Ref的 在阅读这篇博客之前，建议至少阅读这个系列的第一篇。本篇博客假设你已经懂得使用Vue中的ref和TypeScript基础。 本篇博客深入源码，通过日常使用的底层执行顺序进行分析，使你理解响应式原理。以下代码中，中文注释是本人创作，请遵守CC BY-NC-SA 4.0协议。英文代码均为Vue源码，请遵守Vue的MIT开源协议。 源码：src/v3/reactivity/ref.tssrc/core/observer/dep.ts 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511 ...

本系列主要围绕Vue2和Vue3的主要区别。 构建环境Vue CLI -> ViteVuex -> PiniaVetur -> Volartsc -> vue-tsc setup语法糖在Vue3中，为SFC引入了<script setup>，将setup从export中解放出来，优化了可读性。 12345678910111213<script setup>// 变量const msg = 'Hello!'// 函数function log() { console.log(msg)}</script><template> <button @click="log">{{ msg }}</button></template> 这样，setup会被识别成一个函数，所有在<script setup>的顶级变量会被uglify进一步缩小编译文件大小。（之前的处理方式会将所有 ...

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦。如果组件继承链路特别长，就会导致中间组件的大规模改写。本篇文章介绍Vue中的依赖注入。 Props 逐级透传问题如果采取逐级透传，修改每个组件如果使用依赖注入，只关注需要传递数据的两个组件 语法介绍首先，我们需要在父组件中显式地指定需要导出的数据 12345export default { provide: { message: 'hello!' }} 然后在子组件中指定需要注入的数据 (数据直接被注入到this上) 123456export default { inject: ['message'], created() { console.log(this.message) // inj ...

Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时，视图会随即自动更新。这让状态管理更加简单直观。Vue的响应式可以轻松降低编码难度，但是使用不当也会造成很多麻烦，本篇文章以computed为例将分析Vue是如何监听数据变化并更新组件的。 为什么要采取响应式前端通常是获取后端数据，进行一定程度的处理，再进行渲染。这其中涉及到了网络请求中，处理中和处理完成的状态。在较为复杂的页面中为每个与后端交流的请求处理这三种状态是重复机械的工作。而响应式将这种状态抽象出来，通过监听数据变化，再调用处理函数，最后进行渲染，使编码的重点集中在了如何处理数据和渲染。 监听数据变化js原生不支持追踪基本数据类型的读写，但是通过Proxy可以实现追踪对象属性的读写。（只针对Vue3，Vue2不作讨论）下面是来自Vue的伪代码。 12345678910111213function ref(value) { const refObject = { get value() { track(ref ...

起因是在项目中有token api，为了统一管理token，遂采取 1export const state = reactive({}) 这样的方式缺失了ts的类型约束， 同时更新属性时非常麻烦。而Vuex就是为了解决这些问题，同时为ssr提供了支持。Vuex是这样介绍自己的 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Quick Start一个简单的实例，定义一个count，同时有一个自增函数 12345678910111213141516171819202122import { createApp } from 'vue'import { createStore } from 'vuex'import App from './app.vue'// 创建一个新的 store 实例const store = createStore( ...