Vue双向绑定原理梳理
简介vue数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。实现方式:数据劫持 结合 发布者-订阅者 模式。数据劫持通过 Object.defineProperty()方法。
对对象的劫持
构造一个监听器 Observer ,用来劫持并监听所有属性,添加到收集器 Dep 中,当数据发生变化的时候发出一个 notice(通知)。
添加一个发布者 Dep , 用来收集订阅者 Watcher 和发布更新通知 。
视图中会用到 data 中的 key ,这称为依赖。同⼀个 key 可能出现多次,每次都需要收集出来用⼀个 Watcher 来维护它们,此过程称为依赖收集多个 Watcher 需要⼀个 Dep 来管理,需要更新时由 Dep 统⼀通知。
构造一个订阅者 Watcher ,一方面接收监听器 Observer 通过 Dep 传递过来的数据变化,一方面执行自身绑定的回调函数(update)进行界面更新。
实现一个解析器 Compile ,实现指令解析,初始化视图,并订阅数据变化,绑定好更新函数。
值得注意的是,解析器在解析DOM的时候,是用的 DocumentFragment ...
JS比较数值大小
一、 简单循环算法代码如下:123456const numbers = [5, 6, 2, 3, 7];let max = -Infinity;for (let i = 0; i < numbers.length; i++) { if (numbers[i] > max) max = numbers[i];}
Infinity
概述全局属性 Infinity 是一个数值,表示无穷大。
说明
Infinity 的初始值是 Number.POSITIVE_INFINITY。
Infinity(正无穷大)大于任何值。
在 ECMAScript 5 的规范中, Infinity 是只读的。
示例12345console.log(Infinity ); /* Infinity */console.log(Infinity + 1 ); /* Infinity */console.log(Math.pow(10, 1000)); /* Infinity */console.log(Math.log(0) ...
Nodejs报错记录
◉ digital envelope routines::unsupported123456D:\workspace\vuedemo> npm run dev...error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10)...
Nodejs升级到17版本以上时,运行之前的webpack项目会出现此问题。详情查看 github。
解决办法有两种:
修改 package.json,在相关构建命令之前加入 set NODE_OPTIONS=–openssl-legacy-provider & 12345"scripts": { "serve": "set NODE_OPTIONS=–openssl-legacy-provider & vue-cli-service serv ...
你好,我的博客
这是我搭建的首个个人博客,使用的是 Hexo + Butterfly。初次见面,请多多指教💕
快速开始创建新文章1$ hexo new "My New Post"
详情查看: Writing
运行服务1$ hexo server
详情查看: Server
上传 algolia 搜索内容1$ hexo algolia
生成静态文件1$ hexo generate
详情查看: Generating
部署1$ hexo deploy
详情查看: Deployment
上传到 github1$ hexo g -d
升级 hexo-theme-butterfly1$ npm update hexo-theme-butterfly
其他使用 vscode 预览博客时显示本地图片本地博客中的本地图片地址一般为 /img/xxx,省略了本地目录的 soucre 文件夹,博客部署时会把所有文件夹都部署在根目录(本地图片 /source/img/xxx,服务端 /img/xxx),显示正常,但是本地预览则找不到此路径,所以预览时会显示不出来。如果你使用vscode的话,可以推荐此方案 ...