vue 笔记

# vue 事件绑定流程（以浏览器环境为例）

  1. 在template 中书写@click='xx' 或者:onClick='xx'
  2. 编译时通过@vue/compiler-core的parseAttribute统一编译为{ props: { onClick: xx } }形式，如果同时存在@click和:onClick，那么两者都会保留变成{ props: { onClick: [xx, xx] } }数组形式
  3. 运行时通过@vue/runtime-dom的patchProps使用props属性创建或更新节点元素
  4. patchProps根据正则isOn判断属性是否是on开头，从而来判断属性是否是事件绑定, 如果是的话则调用patchEvent进行事件绑定
  5. patchEvent调用原生的addEventListener来绑定到原生 DOM 上(这里并没有区分是否真的是 DOM 原生事件（click 等），而是全部都会进行绑定)

# Vue Conf 观后

记得最早开始接触vue是vue1.x的时候，那时候在jd，一个移动端的项目引入了vue.js，当时只是简单写了一下，感觉是一个带有自己生命周期钩子的前端框架js，开发来说也比较方便，了解不深，后来开始使用React之后社区里面凡是搜索React相关的必定能搜索到React和Vue对比的文章，所以多多少少也看了一些，知道它是使用什么原理来响应式的更新DOM，记得以前很早去看尤雨溪在github上的一个评论提到为什么会开发Vue，最早期只是自己觉得市面上的框架都不是很好用，自己试着按照自己的想法去做一个能更新DOM的东西出来，后来感觉做的也还不错，于是开源到社区，没想到社区里面很多人也喜欢这个方式，于是渐渐的用的人多了一起，慢慢发展壮大。

现在对于我来说享受到了代码提示和类型提示带来的好处和安全感之后，很难再回到盲编码的阶段了，但是现在用的Vue2对于ts的支持比较差，用起来很蛋疼，而且模板里面完全享受不到类型提示和补全的快感，尤雨溪自己也说押错了宝，他早期并不看好ts，没想到后来ts的发展让他自己也感叹真香，所以Vue3里面从头开始使用ts重写，这也是我很期待Vue3的一个原因，另外像hooks编程这种新特性也很好的契合了我之前写React hooks的一贯想法，同一块逻辑就应该放在一块维护，而不是拆分在不同的地方不同的生命周期中。

Vue也在探索着走自己的路，静态节点优化等等都能看到他们在自己的方向上做出的努力，我本身是喜欢React的哲学的，函数即一切，尤其是纯函数，享受完全自由化的js函数编程的能力，Vue相较来说就有很多限制和不支持，他会告诫你什么该做，什么不该做，这是我所不喜欢的，记得原来尝试性的用Vue2.x做一个管理后台的时候，痛苦了整整一个星期，我反复的查阅文档，学习并且牢记住每一个支持的写法，vue的官方文档总是跟我的代码编辑器一样开一个tab放在旁边随时查看，我太讨厌这种查字典的感觉了，但是后来写React的时候我就笑了起来，我只是粗略的看了一下React的文档，了解了它的设计哲学之后就开始随心所欲的编码了，我想写成什么样都能很好的实现我想要的效果，这太自由了，仿佛没有框架一样，普遍的说法是React的学习门槛要比Vue高一些，但是在我这里完全反了过来，可能我天生喜欢自由的东西，不喜欢限制与约束，如果一个框架有限制，那么我希望它能自己处理好这种限制，不要来告诉我应该做什么不应该做什么。

另外 vitePress 也许可以尝鲜一下，写博客也许用得到。