随笔分类 - 2022目标
摘要：
Vue单向数据流的理解: https://zhuanlan.zhihu.com/p/385640898 单向数据流就是从一个组件单方向将数据流向它的内部组件，也就是父组件的数据流向子组件中，但子组件不能将这个数据修改掉，要返回到父组件中修改然后重新流向子组件，从而达到更新数据的原理
阅读全文
Vue单向数据流的理解: https://zhuanlan.zhihu.com/p/385640898 单向数据流就是从一个组件单方向将数据流向它的内部组件，也就是父组件的数据流向子组件中，但子组件不能将这个数据修改掉，要返回到父组件中修改然后重新流向子组件，从而达到更新数据的原理
阅读全文
摘要：
Vue单页面与多页面的区别: https://blog.csdn.net/m0_45070460/article/details/107573424 定义 SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用（一个html页面），一开始只需要加载一次js、
阅读全文
Vue单页面与多页面的区别: https://blog.csdn.net/m0_45070460/article/details/107573424 定义 SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用（一个html页面），一开始只需要加载一次js、
阅读全文
摘要：
Vue3 采用了 Proxy 做数据的拦截，因为 Proxy 是懒执行的，所以没有像 Vue2 一样上来需要递归的去劫持属性的 get set, 这样带来的好处就是提升了更好的性能 Vue3 在编译阶段做的优化，由于模版语法带来的灵活性的限制，所以 vue3 在模版编译方面采用了 只编译动态属性和动
阅读全文
Vue3 采用了 Proxy 做数据的拦截，因为 Proxy 是懒执行的，所以没有像 Vue2 一样上来需要递归的去劫持属性的 get set, 这样带来的好处就是提升了更好的性能 Vue3 在编译阶段做的优化，由于模版语法带来的灵活性的限制，所以 vue3 在模版编译方面采用了 只编译动态属性和动
阅读全文
摘要：
vue.nextTick()方法的使用详解: https://blog.csdn.net/zhouzuoluo/article/details/84752280 vue源码解析：nextTick: https://segmentfault.com/a/1190000020049857 原理 Vue是
阅读全文
vue.nextTick()方法的使用详解: https://blog.csdn.net/zhouzuoluo/article/details/84752280 vue源码解析：nextTick: https://segmentfault.com/a/1190000020049857 原理 Vue是
阅读全文
摘要：
S继承的原理、方式和应用: https://www.cnblogs.com/yunshangwuyou/p/11968539.html //寄生组合式继承（寄生式+原型:通过借用函数来继承属性,通过原型链的混成形式来继承方法） function inheritObject(o) { //声明一个过渡
阅读全文
S继承的原理、方式和应用: https://www.cnblogs.com/yunshangwuyou/p/11968539.html //寄生组合式继承（寄生式+原型:通过借用函数来继承属性,通过原型链的混成形式来继承方法） function inheritObject(o) { //声明一个过渡
阅读全文
摘要：
组合继承实现原理 核心:结合了原型链继承和构造函数继承两种模式的优点，传参和复用，在子类构造函数中执行父类构造函数，在子类原型上实例化父类 缺点 内存浪费 子类原型上有一份多余的父类实例属性，因为父类构造函数被调用了两次，生成了两份，而子类实例上的那一份屏蔽了子类原型上的 function Pare
阅读全文
组合继承实现原理 核心:结合了原型链继承和构造函数继承两种模式的优点，传参和复用，在子类构造函数中执行父类构造函数，在子类原型上实例化父类 缺点 内存浪费 子类原型上有一份多余的父类实例属性，因为父类构造函数被调用了两次，生成了两份，而子类实例上的那一份屏蔽了子类原型上的 function Pare
阅读全文
摘要：
复习 call 的基本实现原理 call 能改变函数的 this call 的第一个参数是 this, 后面的参数都是无限的 const obj = { name: "jack", }; function getB(x, y) { console.log(this, x, y); } Functio
阅读全文
复习 call 的基本实现原理 call 能改变函数的 this call 的第一个参数是 this, 后面的参数都是无限的 const obj = { name: "jack", }; function getB(x, y) { console.log(this, x, y); } Functio
阅读全文
摘要：
父子组件挂载渲染过程 子组件更新过程： 影响到父组件： 父beforeUpdate → 子beforeUpdate->子updated → 父updated 不影响父组件： 子beforeUpdate → 子updated 父组件更新过程： 影响到子组件： 父beforeUpdate → 子befo
阅读全文
父子组件挂载渲染过程 子组件更新过程： 影响到父组件： 父beforeUpdate → 子beforeUpdate->子updated → 父updated 不影响父组件： 子beforeUpdate → 子updated 父组件更新过程： 影响到子组件： 父beforeUpdate → 子befo
阅读全文
摘要：
实现原理：vue-router 的原理就是更新视图而不重新请求页面 vue-router 可以通过 mode 参数设置为三种模式：hash 模式、history 模式、abstract 模式。 hash 模式。默认是 hash 模式，基于浏览器 history api，使用 window.addEv
阅读全文
实现原理：vue-router 的原理就是更新视图而不重新请求页面 vue-router 可以通过 mode 参数设置为三种模式：hash 模式、history 模式、abstract 模式。 hash 模式。默认是 hash 模式，基于浏览器 history api，使用 window.addEv
阅读全文
摘要：
核心:实例化父类函数之后，将其拷贝到子类的原型prototype上。继承父类之后,子类可以使用父类的实例属性以及父类的原型属性 优点:从已有的对象衍生新的对象，不需要创建自定义类型 缺点1，新实例向父类构造函数传参，不符合面向对象编程的规则 function Person(name, age, jo
阅读全文
核心:实例化父类函数之后，将其拷贝到子类的原型prototype上。继承父类之后,子类可以使用父类的实例属性以及父类的原型属性 优点:从已有的对象衍生新的对象，不需要创建自定义类型 缺点1，新实例向父类构造函数传参，不符合面向对象编程的规则 function Person(name, age, jo
阅读全文
摘要：
引言 前边说了三列布局的三种方法，博主经过了解发现，原来还有其他的办法，今天我们就来聊一聊其他的方法 方法一：calc实现三列布局 css .outer{ height: 300px; } .left{ float: left; width: 100px; height: 300px; backgr
阅读全文
引言 前边说了三列布局的三种方法，博主经过了解发现，原来还有其他的办法，今天我们就来聊一聊其他的方法 方法一：calc实现三列布局 css .outer{ height: 300px; } .left{ float: left; width: 100px; height: 300px; backgr
阅读全文
摘要：
// 实现1物理像素边框 .border-1px-inenr(@color) { &::after { content: ''; position: absolute; left: 0; width: 100%; height: 1px; background-color: @color; @med
阅读全文
// 实现1物理像素边框 .border-1px-inenr(@color) { &::after { content: ''; position: absolute; left: 0; width: 100%; height: 1px; background-color: @color; @med
阅读全文
摘要：
浏览器层合成与页面渲染优化: https://juejin.cn/post/6844903966573068301 3D transforms：translate3d、translateZ 等 video、canvas、iframe 等元素 通过 Element.animate() 实现的 opac
阅读全文
浏览器层合成与页面渲染优化: https://juejin.cn/post/6844903966573068301 3D transforms：translate3d、translateZ 等 video、canvas、iframe 等元素 通过 Element.animate() 实现的 opac
阅读全文
摘要：
1. 什么是 srr 在讲服务度渲染之前，我们先回顾一下页面的渲染流程： 浏览器通过请求得到一个HTML文本 渲染进程解析HTML文本，构建DOM树 解析HTML的同时，如果遇到内联样式或者样式脚本，则下载并构建样式规则（stytle rules），若遇到JavaScript脚本，则会下载执行脚本。
阅读全文
1. 什么是 srr 在讲服务度渲染之前，我们先回顾一下页面的渲染流程： 浏览器通过请求得到一个HTML文本 渲染进程解析HTML文本，构建DOM树 解析HTML的同时，如果遇到内联样式或者样式脚本，则下载并构建样式规则（stytle rules），若遇到JavaScript脚本，则会下载执行脚本。
阅读全文
摘要：
1、虚拟DOM的key的作用： key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】， 随后Vue进【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2、对比规则： （1）旧虚拟DOM中找到了与新虚拟DOM相同的key： 若虚拟DOM中内容
阅读全文
1、虚拟DOM的key的作用： key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】， 随后Vue进【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2、对比规则： （1）旧虚拟DOM中找到了与新虚拟DOM相同的key： 若虚拟DOM中内容
阅读全文
摘要：
Tree-Shaking 实现原理:https://zhuanlan.zhihu.com/p/403901557#:~:text=Tree-Shaking%20%E6%98%AF%E4%B8%80%E7%A7%8D%E5%9F%BA%E4%BA%8E%20ES%20Module%20%E8%A7%8
阅读全文
Tree-Shaking 实现原理:https://zhuanlan.zhihu.com/p/403901557#:~:text=Tree-Shaking%20%E6%98%AF%E4%B8%80%E7%A7%8D%E5%9F%BA%E4%BA%8E%20ES%20Module%20%E8%A7%8
阅读全文
摘要：
Array.form [...] Array.prototype.slice.call Array.prototype.map.call
阅读全文
Array.form [...] Array.prototype.slice.call Array.prototype.map.call
阅读全文
摘要：
什么是BFC？看这一篇就够了 https://blog.csdn.net/sinat_36422236/article/details/88763187 简单来说 BFC (块级格式化上下文) 就是指定页面的盒子采用何种策略模式渲染盒子中的内容， 下列方式会创建块格式化上下文： 根元素或包含根元素的
阅读全文
什么是BFC？看这一篇就够了 https://blog.csdn.net/sinat_36422236/article/details/88763187 简单来说 BFC (块级格式化上下文) 就是指定页面的盒子采用何种策略模式渲染盒子中的内容， 下列方式会创建块格式化上下文： 根元素或包含根元素的
阅读全文
摘要：
回调函数 回调函数是作为参数传给另一个函数的函数，这个函数会在另一个函数执行完成后执行 任务队列 任务队列是一个事件的队列，IO设备完成一项任务后，就在队列中添加一个事件，表示相关的异步任务可以进入执行栈中了 同步任务：主线程上排队执行的任务，前一个任务执行完成后才能执行下一个任务 异步任务：不进入
阅读全文
回调函数 回调函数是作为参数传给另一个函数的函数，这个函数会在另一个函数执行完成后执行 任务队列 任务队列是一个事件的队列，IO设备完成一项任务后，就在队列中添加一个事件，表示相关的异步任务可以进入执行栈中了 同步任务：主线程上排队执行的任务，前一个任务执行完成后才能执行下一个任务 异步任务：不进入
阅读全文
