Lee Blog

vue3中 watch、watchEffect区别1、watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行） 2、watch需要传递监听的对象，watchEffect不需要 3、watch只能监听响应式数据：ref定义的属性和reactive定义的对象，如果直接监听reactive定义对象中的属性是不允许的，除非使用函数转换一下 4、watchEffect如果监听reactive定义的对象是不起作用的，只能监听对象中的属性。 123456789101112131415161718let count = ref(0)let countObj = reactive({count: 0})// 惰性，首次加载不执行watch(count, (newVal, oldVal) =>{console.log(newVal, oldVal)} )// watch 不能直接监听reactive里面的属性，只 ...

Domain Driven Design（DDD）是Eric Evans于2004在其同名著作里提出的概念，它指明了让软件设计满足理想需求模型的方向。但是建模、设计这种事本来就很抽象，读懂这样的大作也是需要消耗不少脑细胞。本文希望能尽量以简单加实例的方式介绍DDD里的一些常见概念。 简介什么是领域《领域驱动设计》书里写的是：用户会把软件程序应用于某个主体区域，这个区域就是软件的领域。简单来说，就认为是公司的某块业务好了。如果领域比较大，可以将其拆分为多个子域（Subdomain），子域包含核心域（Core Domain）和支撑子域（Supporting Subdomain），核心域顾名思义，是最重要的子域，我们应该把关注点集中在它上面；其余的子域都是支撑子域。支撑子域里有一类特殊的用于解决通用问题的子域，称为通用子域（Generic Subdomain），例如用户和权限等。不过这些都是相对而言的，对于消费方来说，他的支撑子域有可能就是你的核心域。个别子域可能会有交集，称为共享内核（Shared Kernel），目的是减少重复，但是仍保持两个独立的上下文。由于不同子域的开发团队可能会同时 ...

背景 前端项目日益复杂，功能多 业务逻辑，数据流，渲染，交互等等功能都是放在一块， 没有经过成熟的设计，杂乱无章，功能多了之后， 改一个小东西要把逻辑从头到尾都动一遍 理解 是一个抽象概念一种思想，只在项目设计阶段存在，就是去划分项目每个模块的职责 核心点 建模，建模是整个ddd最重要的部分 需要去区分一个业务中的各个概念，为不同的概念建立不同类型的模型，并且找到它们之间的关系，通过建模，建立起我们编程的基础工程，后续所有的开发，都是在这些模型的基础上完成的 前端建模核心思想：分层思想（Layered Architecture）​ 比如一些常见的想法： 定义业务对象 控制数据流 界面渲染 用户交互��染 用户交互 相关概念领域驱动设计（domain-driven-design）是软件代码的结构及语言需要符合业务领域中的习惯用法 领域驱动设计可以将实现对应到持续进化的模型 领域驱动设计的前提是： 把项目的主要重点放在核心领域（core domain）和领域逻辑 以领域中的模型为基础，进行复杂的设计 让技术人员以及领域专家合作，以迭代方式来完善特定领域问题的概念模型 上 ...

业务系统和一般的应用有非常大的不同，一般的应用以提供给公司/企业外的用户（消费者、普通玩家）提供服务，以完成2C的销售目的，而业务系统一般是2B或者自身消费的模式，完成的是自身业务的管理目标。所以，应用侧重服务，业务系统侧重管理。两者的不同，导致我们对项目开发中，代码的组织方式会有差别。2C应用要满足大量用户在使用时的舒适性，因此要提高项目中有关性能、用户体验、效果等方面的要求，以吸引用户付费。但业务系统则稍有差别，虽然系统的使用体验也很重要，但是不是占最重要的部分，业务系统最重要的部分，是必须保证用户看到的数据、流程等，必须与真实的业务、业务流程一致，否则会带来自身利益的损失，因此，在稳健性、安全性等方面要求更高。 什么是业务模块？首先，什么是业务系统？在这之前，又必须回答什么是业务？业务（Business）专指商业活动，是实现企业生产到利益回收的一个环节，它的总和，构成了该企业盈利活动的整个流程。一般而言，我们所指的业务是企业商业活动中的一个部分，有的甚至小到一个环节，例如“结算”这个环节。业务系统则是辅助这些商业活动的计算机在线系统，以信息化的形式管理和决策企业的商业活 ...

如何打造更稳健的前端业务模块代码组织形式文章出处：如何打造更稳健的前端业务模块代码组织形式业务系统和一般的应用有非常大的不同，一般的应用以提供给公司/企业外的用户（消费者、普通玩家）提供服务，以完成2C的销售目的，而业务系统一般是2B或者自身消费的模式，完成的是自身业务的管理目标。所以，应用侧重服务，业务系统侧重管理。两者的不同，导致我们对项目开发中，代码的组织方式会有差别。2C应用要满足大量用户在使用时的舒适性，因此要提高项目中有关性能、用户体验、效果等方面的要求，以吸引用户付费。但业务系统则稍有差别，虽然系统的使用体验也很重要，但是不是占最重要的部分，业务系统最重要的部分，是必须保证用户看到的数据、流程等，必须与真实的业务、业务流程一致，否则会带来自身利益的损失，因此，在稳健性、安全性等方面要求更高。 本文主要站在稳健性这个角度，试图阐述，在业务系统中，如何去安排或组织我们的（前端）代码，才能保证符合业务系统特征要求，且有利于长期可持续维护下去。由于谈系统过大，那么，本文只立足于一个业务模块来进行阐述。 什么是业务模块？首先，什么是业务系统？在这之前，又必须回答什么是业务 ...

单一功能原则在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有一个单一的功能，并且该功能应该由这个类完全封装起来。所有它的（这个类的）服务都应该严密的和该功能平行（功能平行，意味着没有依赖）。 这个术语由罗伯特·C·马丁（Robert Cecil Martin）在他的《敏捷软件开发，原则，模式和实践》一书中的一篇名为〈面向对象设计原则〉的文章中给出。 [1] 马丁表述该原则是基于的《结构化分析和系统规格》[2]一书中的内聚原则（Cohesion）上。 马丁把功能（职责）定义为：“改变的原因”，并且总结出一个类或者模块应该有且只有一个改变的原因。一个具体的例子就是，想象有一个用于编辑和打印报表的模块。这样的一个模块存在两个改变的原因。第一，报表的内容可以改变（编辑）。第二，报表的格式可以改变（打印）。这两方面的改变会因为完全不同的起因而发生：一个是本质的修改，一个是表面的修改。单一功能原则认为这两方面的问题事实上是两个分离的功能，因此他们应该分离在不同的类或者模块里。把有不同的改变原因的事物耦合在一起的设计是糟糕的。 保 ...

数据绑定 oberserverObject.defineProperty() depdep.notify() watcheruser-watcher render-watcher computed-watcher nextTick nextTick 会在DOM更新完毕之后执行一个回调，确保我们操作的是更新之后的DOM vue用异步队列的方式来控制DOM更新和nextTick回调先后执行microtask因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕因为兼容性问题，vue不得不做了microtask向macrotask的降级方案 (Promise，MutationObserver，setTimeout) MutationObserver 用于监听DOM修改事件，能够监听到节点的属性，文本内容，子节点等的改动 Event Loop MutationObserver 每次监听到变更的时候会往 microtask 添加一个事件 降级方案 Promise => MutationObserver => setTimeout 参 ...

浏览器多进程+多线程DNS寻址方式，DNS 缓存， dns-prefetch建立 tcp/ip 链接，三次握手，四次挥手，滑动窗口，接收窗口，收发帧的策略，为什么关闭要等待 2MSL，get post 区别，并发限制传输数据，展开计算机网络 5 层/7 层模型，五层：http -> tcp/ip -> ip -> data frames -> 物理介质服务器收到请求，负载均衡，tomcat 容器，后端统一拦截过滤展开 http 报文，实体，http 1.0, 1,1 2之间的区别，gzip，长连接/短连接，展开 cookie 及优化，多子域名拆分等展开 https 中 SSL/TLS 链接步骤展开 http 缓存，强缓存，协商缓存，from memory/disk cache等DOM 树的构建过程，bytes -> characters -> tokens -> nodes -> DOMcss rule tree: bytes -> characters -> tok ...

加载渲染过程 同步加载父组件 beforeCreate, created, beforMount子组件 beforeCreate, created, beforMount孙子组件 beforeCreate, created, beforMount孙子组件 mounted子组件 mounted父组件 mounted 异步加载父组件 beforeCreate, created, beforMount, mounted子组件 beforeCreate, created, beforMount, mounted 更新过程父组件 beforeUpdate子组件 beforeUpdate子组件 updated父组件 updated 销毁过程父组件 beforeDestroy子组件 beforeDestroy子组件 destroyed父组件 destroyed

箭头函数不会产生this, 会捕捉当前的执行上下文中的this当做自己的this 箭头函数不能做为构造函数 箭头函数不能绑定 arguments call/apply/bind 对箭头函数不起作用 箭头函数没有原型属性 箭头函数不能当作 Generator 函数，不能使用 yield 关键字