zmj0920 / dailyr-ecord

dailyr-ecord's Issues

2022年8月8号学习记录

https://github.com/sxei/chrome-plugin-demo

研究谷歌插件如何开发，学习基础

angular 面试总结

钩子	用途及时机
constructor()	constructor，来初始化类。Angular中的组件就是基于class类实现的，在Angular中，constructor用于注入依赖。组件的构造函数会在所有的生命周期钩子之前被调用，它主要用于依赖注入或执行简单的数据初始化操作。
ngOnChanges()	当 Angular（重新）设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
ngOnInit()	在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用，只调用一次。使用 ngOnInit() 有两个原因:1.在构造函数之后马上执行复杂的初始化逻辑 2.在 Angular 设置完输入属性之后，对该组件进行准备。有经验的开发者会认同组件的构建应该很便宜和安全
ngDoCheck()	检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。在每个变更检测周期中，紧跟在 ngOnChanges() 和 ngOnInit() 后面调用。
ngAfterContentInit()	当 Angular 把外部内容投影进组件/指令的视图之后调用。第一次 ngDoCheck() 之后调用，只调用一次。
ngAfterContentChecked()	每当 Angular 完成被投影组件内容的变更检测之后调用。ngAfterContentInit() 和每次 ngDoCheck() 之后调用
ngAfterViewInit()	当 Angular 初始化完组件视图及其子视图之后调用。第一次 ngAfterContentChecked() 之后调用，只调用一次。在这里可以操作DOM
ngAfterViewChecked()	每当 Angular 做完组件视图和子视图的变更检测之后调用。ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
ngOnDestroy()	当 Angular 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄 漏。在 Angular 销毁指令/组件之前调用。比如：移除事件监听、清除定时器、退订 Observable 等。

export class LifecircleComponent {

    constructor() {

        console.log('00构造函数执行了---除了使用简单的值对局部变量进行初始化之外，什么都不应该做')
    }

    ngOnChanges() {

        console.log('01ngOnChages执行了---当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)');
    }

    ngOnInit() {
        console.log('02ngOnInit执行了--- 请求数据一般放在这个里面');
    }
    ngDoCheck() {
        console.log('03ngDoCheck执行了---检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应');
    }
    ngAfterContentInit() {
        console.log('04ngAfterContentInit执行了---当把内容投影进组件之后调用');
    }
    ngAfterContentChecked() {
        console.log('05ngAfterContentChecked执行了---每次完成被投影组件内容的变更检测之后调用');
    }
    ngAfterViewInit() : void {
        console.log('06 ngAfterViewInit执行了----初始化完组件视图及其子视图之后调用（dom操作放在这个里面）');
    }
    ngAfterViewChecked() {
        console.log('07ngAfterViewChecked执行了----每次做完组件视图和子视图的变更检测之后调用');
    }

    ngOnDestroy() {
        console.log('08ngOnDestroy执行了····');
    }

    //自定义方法
    changeMsg() {

        this.msg = "数据改变了";
    }
}

Css知识积累

CSS常用伪类元素

表格一：a 元素

序号	选择器	示例	功能说明
1	link	a: link	选择所有未访问链接
2	visited	a: visited	选择所有访问过的链接
3	active	a: active	选择正在活动的链接
4	hover	a: hover	把鼠标放在链接上的状态

表格二：p 元素

序号	选择器	示例	功能说明
1	empty	p: empty	选择所有没有子元素的 p 元素
2	first-of-type	p: first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
3	last-of-type	p: last-of-type	选择的每个 p 元素是其母元素的最后一个 p 元素
4	last-child	p: last-child	选择所有 p 元素的最后一个子元素
5	not(selector)	:not(p)	选择所有 p 以外的元素
6	nth-child(n)	p: nth-child(2)	选择所有 p 元素的父元素的第二个子元素
7	nth-last-child(n)	p: nth-last-child(2)	选择所有p元素倒数的第二个子元素
8	nth-last-of-type(n)	p: nth-last-of-type(2)	选择所有 p 元素倒数第二个为 p 的子元素
9	nth-of-type(n)	p: nth-of-type(2)	选择所有 p 元素第二个为 p 的子元素
10	only-of-type	p: only-of-type	选择所有仅有一个子元素为 p 的元素
11	only-child	p: only-child	选择所有仅有一个子元素的 p 元素
12	first-letter	p : first-letter	选择每个 p 元素的第一个字母
13	first-line	p: first-line	选择每个 p 元素的第一行
14	first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 p 元素
15	before	p: before	在每个 p 元素之前插入内容
16	after	p: after	在每个 p 元素之后插入内容
17	lang(language)	p:lang(it)	为 p 元素的 lang 属性选择一个开始值

表格三：input 元素

序号	选择器	示例	功能说明
1	checked	input: checked	选择所有"选中"的表单元素
2	disabled	input: disabled	选择所有"禁用"的表单元素
3	enabled	input: enabled	选择所有"启用"的表单元素
4	in-range	input: in-range	选择元素指定范围內的值
5	invalid	input: invalid	选择所有无效的元素
6	optional	input: optional	选择没有"required"的元素属性
7	out-of-range	input: out-of-range	选择指定范围以外的值的元素属性
8	read-only	input: read-only	选择"只读"属性的元素属性
9	read-write	input: read-write	选择"没有只读"属性的元素属性
10	required	input: required	选择有"required"属性指定的元素属性
11	valid	input: valid	选择所有有效值的属性
12	focus	input:focus	选择元素输入后具有焦点

表格四：其它伪类 / 伪元素

序号	选择器	示例	功能说明
1	root	root	选择文档的根元素
2	target	#news: target	选择当前活动 #news 元素(点击 URL 包含锚的名字)

Vue3学习

ES6面试题汇总

常见http问题

Token 认证步骤解析：

客户端： 输入用户名和密码请求登录校验；
服务器： 收到请求，去验证用户名与密码；验证成功后，服务端会签发一个 Token 并把这个 Token 发送给客户端；
客户端： 收到 Token 以后需要把它存储起来，web 端一般会放在 localStorage 或 Cookie 中，移动端原生 APP 一般存储在本地缓存中；
客户端发送请求： 向服务端请求 API 资源的时候，将 Token 通过 HTTP 请求头 Authorization 字段或者其它方式发送给服务端；
服务器： 收到请求，然后去验证客户端请求里面带着的 Token ，如果验证成功，就向客户端返回请求的数据，否则拒绝返还（401）；

Token 的优点：

服务端无状态化、可扩展性好： Token 机制在服务端不需要存储会话（Session）信息，因为 Token 自身包含了其所标识用户的相关信息，这有利于在多个服务间共享用户状态
支持 APP 移动端设备；
安全性好： 有效避免 CSRF 攻击（因为不需要 Cookie）
支持跨程序调用： 因为 Cookie 是不允许跨域访问的，而 Token 则不存在这个问题

Token 的缺点：

配合： 需要前后端配合处理；
占带宽： 正常情况下比 sid 更大，消耗更多流量，挤占更多宽带
性能问题： 虽说验证 Token 时不用再去访问数据库或远程服务进行权限校验，但是需要对 Token 加解密等操作，所以会更耗性能；
有效期短： 为了避免 Token 被盗用，一般 Token 的有效期会设置的较短，所以就有了 Refresh Token；

作者：易师傅
链接：https://juejin.cn/post/7129298214959710244
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

vue3 基础知识

1. Vue3 所采用的 Composition API 相比 Vue2 使用的 Options API 有什么优势？

Options API 又叫 选项式API，通过data、methods、computed、watch等配置项来处理逻辑。存在以下几个问题：

● 代码的可读性随着组件变大而变差，同一个功能的代码比较分散，反复横跳
● 使用this，逻辑比较复杂时会出现this指向不明的情况
● mixin使用导致数据来源不清晰以及命名冲突等问题
● TS支持有限

Composition API 又叫 组合式API，使用基本变量和函数来处理逻辑。
● 逻辑组织和代码复用（组合式函数）方面更加优秀
● 因为 Composition API 几乎是函数，会有更好的类型推导，更好的支持TS
● Composition API 对 tree-shaking 友好，代码也更容易压缩
● Composition API 中见不到this的使用，减少了this指向不明的情况

2. Vue3性能提升通过哪几个方面体现的？

（1）编译阶段：更快的渲染速度
● diff算法优化（静态标记），会发生变化的地方添加一个flag标记，下次发生变化的时候直接找该地方进行比较
● 静态提升：Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用，避免重复的创建操作，优化运行时候的内存占用
● 事件监听缓存：开启后，没有了静态标记，下次diff算法时直接使用
● SSR优化：当静态内容大到一定量级的时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHTML，就不需要创建对象，然后根据对象渲染
（2）更小的包体积：移除一些不常用的API，源码体积更小，支持tree-shaking，任何一个函数，仅仅在 用到的时候才打包，没用到的模块都被去掉，打包的整体体积变小。
（3）响应式系统的改变：更快的更新速度
vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式
● 检测不到对象属性的添加和删除
● 数组API方法和索引也无法监听到
● 需要对每个属性进行遍历监听，如果嵌套对象，需要深层监听，造成性能问题
vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历
● 可以监听对象属性的添加和删除
● 可以监听到数组的索引、length属性以及API方法
● 缺点：不兼容 IE

3. 说说Vue 3.0中Tree-shaking特性？举例说明一下？

Tree shaking 是一种通过清除多余代码的方式来优化项目打包体积的技术，在保持代码运行结果不变的前提下，去除无用的代码。
Tree shaking主要是借助ES6模块规范的静态编译**，在编译时就能确定模块的依赖关系，以及输入和输出的变量
Tree shaking无非就是做了两件事：
● 编译阶段利用ES6 Module判断哪些模块已经加载
● 判断哪些模块和变量未被使用或者引用，进而删除对应代码
通过Tree shaking，Vue3给我们带来的好处是：
● 减少程序体积（更小）
● 减少程序执行时间（更快）

4. Watch和WatchEffect的区别？

● watch需要指定监听的数据源，而watchEffect自动追踪回调中的响应式依赖
● watch可以接收三个参数，指定的数据源，回调函数，选项对象，watchEffect只需要接收一个回调函数
● watchEffect会立即执行一次回调函数，watch可以手动配置立即执行
● watchEffect不需要显示地停止监视，它会自动在组件卸载时停止
● 如果需要监视特定的数据并在数据发生变化时执行回调函数，可以使用watch
● 如果需要执行一个函数并在函数内部访问响应式数据，并且在数据发生变化时重新执行该函数，可以使用watchEffect

5. script setup是干啥的？

是SFC中使用组合式API的编译时语法糖。
● 更少的样板内容，代码更加简洁
● 属性和方法无需返回，可以直接使用
● 引入组件的时候，会自动注册
● 使用纯TS声明props和自定义事件
● 更好的运行时性能
● 更好的IDE类型推导性能（减少了语言服务器从代码中抽取类型的工作）

Vue 3 中的 setup() 函数有什么作用？

在 Vue 3 中，组件的选项对象中新增了一个名为 setup() 的函数，它会在组件初始化时被调用，负责设置组件的响应式状态、计算属性、方法等等。和 Vue 2 中的生命周期钩子函数相比，setup() 函数具有以下优势：

代码更具可读性和可维护性，因为可以将相关代码组织成逻辑功能块（composition）。
通过参数和返回值的方式，更明确地声明组件所需的属性和方法，便于类型推导和代码补全。
可以使用最新的 JavaScript 特性，例如 async/await 和解构赋值。

6. 组件通信方式

● props（父向子传递属性，子使用defineProps接收）
● 自定义事件（父向子传递自定义事件，子使用defineEmits接收）
● defineExpose结合ref（子通过defineExpose暴露事件，父通过ref获取子暴露的事件）
● attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合
● provide / inject（可用于隔代组件之间通信）
● pinia（全局状态管理）
● mitt（事件总线）

7. ref和reactive的区别？

● ref 创建的响应式数据，在模板中可以直接被使用，在脚本中需要通过 .value 的形式才能使用，reactive创建的数据可以直接使用
● ref 可以接收基本数据类型与引用数据类型，reactive只能接收引用数据类型
● 如果将一个对象赋值给ref，这个对象将通过reactive()转为具有深层次响应式对象
● ref传入基本类型时响应式依赖Object.defineProperty的getter和setter，reactive底层本质是将传入的数据包装成一个Proxy

8. 谈谈pinia？

pinia是Vue官方团队开发的一个全新状态管理库，和Vuex对比，它有如下优势：
● 更加轻量级：1kb左右
● 完整的 TS 的支持：Pinia 源码完全由 TS 编写，提供更好的类型检查和代码提示
● 更简单的API：移除 mutations，只剩下 state 、actions 、getters，使状态管理变得更加直观、易于理解和维护。
● 更友好的代码分割机制：支持多个 store，且都是互相独立隔离的
● 同时支持Vue2和Vue3
● 支持服务端渲染（SSR）

9. Vue3的响应式原理？

https://juejin.cn/post/6858899262596448270

10. Vue3的新特性？

（1）性能提升
● 响应式由原来的Object.defineProperty改为基于ES6的Proxy，响应式速度更快
● diff算法优化，增加了静态标记
● 模板编译优化，增加了静态提升，不参与更新的元素只被创建一次
● 更加高效的组件初始化
（2）更好的TS支持
（3）新增Composition API
（4）新增组件
● Template中可以有多个根节点
● Teleport传送门，允许我们将控制的内容传送到任意的DOM中
● Suspense等待异步组件时渲染一些额外的内容，让应用有更好的用户体验
（5）支持tree-shaking，打包体积更小，加载速度更快

11. Vue3中如何处理异步组件？

提供了Suspense组件和defineAsyncComponent函数，可以优雅地处理异步组件的加载和渲染

12. 虚拟DOM原理

（1）虚拟DOM本质上是一个JS对象，保存在内存中，是一个树形结构，与真实DOM结构一一对应
（2）当数据发生变化时，生成一颗新的虚拟DOM树，与旧的虚拟DOM树进行比较，记录差异
（3）根据记录下的差异，更新真实DOM树
（4）优势：更新真实DOM非常耗费性能（浏览器需要重新计算布局和绘制），而更新虚拟DOM只是修改JS对象，减少真实DOM更新的次数，最终也只会对需要更新的部分进行DOM操作。

Proxy和Object.defineProperty的区别？

Proxy和Object.defineProperty都可以用来实现JavaScript对象的响应式，但是它们有一些区别：

实现方式：Proxy是ES6新增的一种特性，使用了一种代理机制来实现响应式。而Object.defineProperty是在ES5中引入的，使用了getter和setter方法来实现。

作用对象：Proxy可以代理整个对象，包括对象的所有属性、数组的所有元素以及类似数组对象的所有元素。而Object.defineProperty只能代理对象上定义的属性。

监听属性：Proxy可以监听到新增属性和删除属性的操作，而Object.defineProperty只能监听到已经定义的属性的变化。

性能：由于Proxy是ES6新增特性，其内部实现采用了更加高效的算法，相对于Object.defineProperty来说在性能方面有一定的优势。

综上所述，虽然Object.defineProperty在Vue.js 2.x中用来实现响应式，但是在Vue.js 3.0中已经采用了Proxy来替代，这是因为Proxy相对于Object.defineProperty拥有更优异的性能和更强大的能力。

v-if 和 v-for 的优先级哪个高？

在 vue2 中 v-for 的优先级更高，但是在 vue3 中优先级改变了。v-if 的优先级更高。

React学习记录

Vue2 基础知识积累

vue响应式原理

Vue 的响应式原理是通过数据劫持和观察者模式实现的。Vue 在创建实例时，会遍历数据对象中的每个属性，使用 JavaScript 的 Object.defineProperty 方法将其转化为 getter 和 setter。这使得 Vue 能够监测属性的读取和修改。

当数据属性发生变化时，setter 方法会被调用，从而触发视图更新。Vue 的虚拟 DOM 会与之前的虚拟 DOM 进行比较，找出需要实际更新的部分，然后将实际 DOM 更新为新的虚拟 DOM 结构。

var data = { message: 'Hello, Vue!' };
Object.defineProperty(data, 'message', {
  get: function() {
    // 响应式系统追踪属性的读取操作
    return value;
  },
  set: function(newValue) {
    // 响应式系统追踪属性的修改操作
    value = newValue;
    // 触发更新视图的操作
  }
});