摘要：
响应式原理 Vue 响应式 是一种机制，可以声明式地描述数据（data, computed, ref 等），当这些数据发生变化时，Vue 会自动检测到变化，并自动更新所有依赖这些数据的地方（如 DOM、计算属性、侦听器等）。即 修改数据，视图自动更新。 底层原理：读取数据时进行依赖收集 + 修改数据 阅读全文
posted @ 2024-10-21 10:59
安静的嘶吼
阅读(10)
评论(0)
推荐(0)
摘要：
组件 组件，是对DOM结构的一种抽象。一个大型应用可以通过独立且可复用的多个组件实现。 当数据更新后，组件可以自动重新渲染，用户只需要关心数据逻辑的处理，无须关心底层DOM操作。 1. 组件的渲染 vnode，用来描述DOM的JS对象，可以描述元素节点、组件节点、纯文本节点、注释节点等。 组件vno 阅读全文
posted @ 2024-09-20 10:58
安静的嘶吼
阅读(5)
评论(0)
推荐(0)
摘要：
Vue.js设计 1. Vue.js 3.x的优化 源码优化 使用monorepo 源码中相对重要的两块：packages、scripts。 根据功能不同将代码拆分到packages目录下的不同子目录中，各个子目录有自己的API、类型定义、测试文件等。模块拆分更细、责任划分更明确，模块间的依赖关系更 阅读全文
posted @ 2024-09-09 09:26
安静的嘶吼
阅读(7)
评论(0)
推荐(0)
摘要：
webpack原理 常⽤配置项 Entry：⼊⼝，Webpack执⾏构建的第⼀步将从Entry开始，可抽象成输⼊。 Output：输出配置 Module：模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应⼀个⽂件。Webpack 会从配置的Entry开始，递归找出所有依赖的模块。 Loader：模 阅读全文
posted @ 2024-09-03 07:46
安静的嘶吼
阅读(17)
评论(0)
推荐(0)
摘要：
webpack优化 找出问题 Webpack Analyse可视化分析工具 首先，项目执行 webpack--profile--json > stats.json ，将 webpack--profile--json 输出的内容通过管道输出到stats.json文件中。 打开Webpack Analy 阅读全文
posted @ 2024-08-23 18:41
安静的嘶吼
阅读(10)
评论(0)
推荐(0)
摘要：
Webpack实战 框架结合 Vue 接入webpack： 修改webpack.config.js： module: { rules: [ { test: /\.vue$/, use: ['vue-loader'] } ] } 安装依赖 vue-loader：解析和转换.vue文件，提取出其中的逻辑 阅读全文
posted @ 2024-08-23 18:40
安静的嘶吼
阅读(8)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2024-08-23 18:39
安静的嘶吼
阅读(2)
评论(0)
推荐(0)
摘要：
webpack配置 配置⽅式 通过⼀个js⽂件描述配置webpack.config.js 执行webpack可执行文件时通过命令行参数传入参数，如webpack--devtool source-map Webpack配置导出类型 Object、Function、Promise、Array 按照配置所 阅读全文
posted @ 2024-08-19 07:56
安静的嘶吼
阅读(9)
评论(0)
推荐(0)
摘要：
前端构建⼯具 模块化 模块化： 将复杂的项目代码拆分为独立的、可复用的模块，每个模块负责独立的功能，并通过接口与其他模块交互。提高代码的可读性、可维护性、复用性。 模块化解决的问题：命名冲突、功能复用、依赖管理、代码复用、按需加载、作用域隔离、可维护性 模块化规范 CommonJS 核⼼思想：通过r 阅读全文
posted @ 2024-08-09 22:18
安静的嘶吼
阅读(14)
评论(0)
推荐(0)
摘要：
初始化项目 ├── package.json └── src ├── bin.ts └── index.ts 首行是 Hashbang, Hashbang是一种特殊的注释，以 #! 开头，通常出现在可执行的脚本文件的第一行，用于告诉系统要使用哪个解释器来执行该脚本文件。 #!/usr/bin/env 阅读全文
posted @ 2024-08-02 23:23
安静的嘶吼
阅读(63)
评论(0)
推荐(0)
摘要：
初始化、包安装、更新 npm install npm@latest -g，安装最新版本npm npm init，创建package.json文件 npm update -g lodash，更新包 发布npm包 npm whoami，查看谁在登录当前npm账号 npm publlish npm ver 阅读全文
posted @ 2024-07-31 22:26
安静的嘶吼
阅读(43)
评论(0)
推荐(0)
摘要：
点击某个元素及点击某个元素之外的地方 <!DOCTYPE html> <html> <style> .left { width: 100px; height: 200px; background: red; float: left; } .right { height: 300px; backgro 阅读全文
posted @ 2024-07-30 22:59
安静的嘶吼
阅读(25)
评论(0)
推荐(0)
摘要：
节流 一种常用的性能优化技术，可以限制函数的执行频率，避免过多的重复操作，提升页面的响应速度； 函数在n秒内只执行一次，如果多次触发，则忽略执行； 应用场景：拖拽场景；scroll场景；窗口大小调整 function throttle(func, delay) { let lastCallTime 阅读全文
posted @ 2024-07-27 22:13
安静的嘶吼
阅读(31)
评论(0)
推荐(0)
摘要：
设计模式 1. 设计模式 2. 工厂模式 3. 单例模式 4. 原型模式 5. 装饰器模式 6. 适配器模式 7. 代理模式 8. 策略模式 9. 状态模式 10. 观察者模式 & 发布订阅模式 11. 迭代器模式 12. vue中用到的设计模式 设计模式 设计模式基本原则：单一功能原则、开放封闭原 阅读全文
posted @ 2024-07-26 22:14
安静的嘶吼
阅读(37)
评论(0)
推荐(0)
摘要：
VDOM VDOM，JavaScript对象，即对真实DOM的描述； 虚拟DOM创建页面性能：创建JavaScript对象的计算量 + 创建真实DOM的计算量；（第一步，创建JavaScript对象，即真实DOM的描述；第二步，递归地遍历虚拟DOM树并创建真实DOM；） 虚拟DOM更新更新页面过程： 阅读全文
posted @ 2024-07-25 23:21
安静的嘶吼
阅读(32)
评论(0)
推荐(0)
摘要：
Vue 1. 同构渲染 同构渲染 客户端渲染(render.render)：Vue.js可以用于构建客户端应用程序，组件的代码在浏览器中运行，并输出DOM元素； 服务端渲染：同时，Vue.js还可以在Node.js环境中运行，它可以将同样的组件渲染为字符串并发送给浏览器； 同构渲染(render.h 阅读全文
posted @ 2024-07-24 22:22
安静的嘶吼
阅读(67)
评论(0)
推荐(0)
摘要：
Vue 1. 编译器核心技术概览 2. 解析器 3. 编译优化 编译器核心技术概览 模板DSL的编译器 编译器，一段程序，将语言A翻译成语言B；其中语言A叫源代码，语言B叫目标代码； 编译器将源代码翻译为目标代码的过程叫编译； 完整的编译过程包括：词法分析、语法分析、语义分析、中间代码生成、优化、目 阅读全文
posted @ 2024-07-24 22:21
安静的嘶吼
阅读(64)
评论(0)
推荐(0)
摘要：
Vue组件化 1. 组件化 组件化 渲染器主要负责将虚拟DOM渲染为真实DOM；只需要使用虚拟DOM来描述最终呈现的内容即可。当编写比较复杂的页面时，用来描述页面结构的虚拟DOM的代码量会变得越来越多，或者说页面模板会变得越来越大，这时就需要组件化的能力。 有了组件，则可以将一个大的页面拆分为多个部 阅读全文
posted @ 2024-07-24 22:20
安静的嘶吼
阅读(27)
评论(0)
推荐(0)
摘要：
Vue渲染器 1. 渲染器 2. 挂载与更新 3. 简单diff 4. 双端diff 5. 快速diff 渲染器 渲染器与响应式系统关系：利用响应系统的能力，自动调用渲染器完成页面的渲染和更新。 渲染器：用来执行渲染任务的，把虚拟DOM渲染为特定平台上的真实元素；浏览器平台上，把虚拟DOM渲染为真实 阅读全文
posted @ 2024-07-24 22:19
安静的嘶吼
阅读(40)
评论(0)
推荐(0)
摘要：
Vue 1. 响应式系统的作用与实现 2. 非原始值的响应式方案 3. 原始值的响应式方案 1. 响应式系统的作用与实现 响应式数据与副作用函数 副作用函数 “副作用函数”通常指的是除了返回值之外，还会对函数外部的状态产生影响的函数。如，一个函数修改了全局变量、修改了传入的引用类型参数（而不是返回新 阅读全文
posted @ 2024-07-24 21:21
安静的嘶吼
阅读(40)
评论(0)
推荐(0)
浙公网安备 33010602011771号