曾经遇到过很多喜欢谈论宏大叙事的人，总是把政策、国情之类话题挂在嘴边但又并不是相关学术研究者的人，而谈论这些的目的，是在寻找何处有利可图，何处可以投机。 但在我看来，如今任何一个国家都无法构成单一的经济体，现在我们面临的是一个更为复杂、多元、全球性的经济体，换而言之，影响个人命运的变量越来越多，无法由自己掌握的东西太多，在过去的中国，社会情绪是只要努力就能成功，996 之类的东西无所谓，因为这个承诺最后大概率是能兑现的，而今天的社会情绪变为了内卷和躺平，反对 996 的社会情绪让更多人意识到：不管你如何努力工作，最后这所谓成功的承诺大概率是实现不了的。随着媒体的不断炒作，这种无力感、失控感越来越强。而谈论、研究政策之类的东西，会让人产生一种虚幻的权力感，让人觉得自己的思想凌驾于他人之上，并非凡人，他们需要在自己的圈子里重复此类话题的谈论，不断强化这虚幻的权力感，借此摆脱那种无力感。

好记性不如烂笔头 Basic 通过 createApp 创建应用实例 在 vue2.x 中，使用的是new Vue()，返回的是根组件实例，而createApp返回的是应用实例，想要得到根组件实例，还需要使用mount方法，个人认为这个改动是在语法层面上区分创建组件和创建应用 ES6 Proxy vue2.x 使用 Object.defineProperty来实现数据相应，vue3 中使用 new Proxy()为数据架设一层代理，来实现数据响应 计算属性 computed 计算属性会缓存结果，只要依赖值不变，多次访问该计算属性也不会执行代码，而是直接返回缓存结果，减小性能开销 计算属性拥有getter、setter 侦听器 watch watch 与 computed 几乎相同，唯一不同的是，watch 允许在其中执行异步操作 class 与 style 的绑定 class <div :class="{active: isActive}"></div> <div :class="classes"></div> data(){ return { classes: { avtive: true, container: true } } } <div :class="[activeClass, containerClass]"></div> data(){ return { activeClass: 'active', containerClass: 'container' } } 也可以直接在v-bind:class中使用三运运算符来切换 class 在自定义组件上使用 class 若组件内只有一个根元素，那么这些 class 会自动合并在根元素上 若有多个根元素，需要定义哪些根元素接收 class，使用$attrs <div id="app"> <my-component class="baz"></my-component> </div> const app = Vue.createApp({}) app.component('my-component', { template: ` <p :class="$attrs.class">Hi!</p> <span>This is a child component</span> ` }) 继承的 Attribute 可以使用$arrts来定义 Attribute 具体出现在哪个元素上 ...

之前康复训练，写了一个组件库，涵盖了： 单元测试 自动化集成 上传至npm 书写文档 接下来总结下每一步 单元测试 单元测试使用了Chai、Karma、Mocha、Siono Chai.js 是一个断言库 Karma 是一个测试运行容器，可以呼起浏览器运行测试代码 Mocha 是一个测试框架，参考了阮一峰的文章 Siono 作为 mock 工具提供间谍函数等，可以让我们在测试中测试组件的事件支持 其中难点在于如何将这个几个工具搭配起来构成一套完整的测试环境，除了google就是看文档… 自动化集成 当然，我也不想每次写完代码都自己手动跑一遍测试代码，所以我选择了GitHub Actions，在每次push代码时自动测试，失败了会有邮件通知 上传至NPM 写了库，总是想 share 出去的 # 登录 npm adduser # 根据提示填写 # 发布 npm publish 书写文档 文档方面，选择了 VuePress，就图个文档易读

install wsl2 参照官方文档 install oh-my-zsh 先安装 zsh sudo apt install zsh zsh --version which zsh # $ZSH_PATH 是 which zsh 的值 chsh -s $ZSH_PATH 安装 oh-my-zsh sh -c "$(wget -O- https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" # or sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" 此时你的根目录下应该有一个 .oh-my-zsh 目录 plugins 目录是存放插件的地方，themes 是存放主题的地方 现在让我们来试着修改主题 vim ~/.zshrc 找到 ZSH_THEME= 这一行，修改为 ys，然后在 bash 中运行 source ~/.zshrc 你也可以先花一些时间在这里找到你喜欢的主题 接下来我们搞一些常用插件 vim ~/.zshrc # 找到 plugins=(...) 这一行 # 我目前只使用了这些插件 plugins=(cp themes git git-open z zsh-autosuggestions zsh-syntax-highlighting) 你可以在这里找到 oh-my-zsh 自带插件的用法 ...

为什么要从 Second Commit 开始阅读呢？ 答案来自我看过我的一篇博客，但是关于 First Commit，基本是关于 Grunt 的配置，现代前端开发中，多以使用 Webpack 为主，所以粗略看了一下之后并无记录的打算。 不罗嗦，直接看代码 在这段代码我们已经触及了 Vue 的核心：data bind，实际上也跟我们现在写的 Vue 差不多（当然，这里不是指 SFC ） 首先在 HTML 部分，我们看到了文档中的“Mustache”语法，接下来我们看看最初的 data bind 是如何实现的。 在第 23 行，var content = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken)，用正则表达式匹配{{...}}， 关于 String.prototype.replace() 你可以指定一个函数作为第二个参数。在这种情况下，当匹配执行后，该函数就会执行。 函数的返回值作为替换字符串。 (注意：上面提到的特殊替换参数在这里不能被使用。) 另外要注意的是，如果第一个参数是正则表达式，并且其为全局匹配模式，那么这个方法将被多次调用，每次匹配都会被调用。 当第二个参数是一个函数时，函数接收多个参数，第一个参数match，表示匹配的子串，比如：{{msg}}、{{what}}等，第二个参数用于匹配正则表达式中括号匹配到的字符串，就是匹配正则表达式的这一部分：(.*)，并且这里可以接收多个参数：p1,p2,p3...，他们分别是括号对应的索引，具体参见 MDN。 ok，我们继续回到 23 行，每次匹配执行后都会执行这个函数，这个函数首先会往bindings内填充key:value，key 是{{}}内的值，value 则是一个空对象，然后 return 一个字符串 return '<span ' + bindingMark + '="' + variable +'"></span>' 接着遍历 bindings 执行 bind 方法 function bind (variable) { bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]') ;[].forEach.call(bindings[variable].els, function (e) { e.removeAttribute(bindingMark) }) Object.defineProperty(data, variable, { set: function (newVal) { [].forEach.call(bindings[variable].els, function (e) { bindings[variable].value = e.textContent = newVal }) }, get: function () { return bindings[variable].value } }) } 首先会找到含有bindingMark=... Attribute的 Element，并在bindings对应的key中记录它，接着再删除元素中的bindingMark Attribute，最后使用Object.defineProperty来做到 data bind，这也是 Vue 数据响应的核心。 ...