B站上的小知识点

一、query与params的区别

query：
1、 拼接在url后的参数
2、 参数在？后面，且参数之间用&分隔
3、 query相当于get请求，可以在地址栏看到参数

params:
1、 是路由的一部分，以对象的形式传递参数
2、 使用params传参只能由name引入路由，如果写出path页面会显示警告，说参数会被忽略
3、 params相当于post请求，参数不再会在地址栏中显示

二、Vue3如何自定义指令及其生命周期钩子、参数

  ceated：再绑定元素的attribute或事件监听器被应用之前调用
  beforeMount：在绑定元素的父组件挂载之前调用
  mounted：绑定元素的父组件被挂载时调用
  beforeUpdate：在包含组件的VNode及其子组件的VNode更新后调用
  updated：在包含组件的VNode及其子组件的VNode更新之后调用
  beforeUnmount：在绑定元素的父组件卸载之前调用
  unmounted：卸载绑定元素的父组件时调用

自定义指令的参数
  el指令绑定到的元素。这可用于直接操作DOM

  binding是一个对象，包含以下的属性
         instance：使用指令的组件实例
         value：传递给指令的值
         oldValue：先前的值，仅在beforeUpdate和updated中可用
         modifiers：包含修饰符（如果有）的对象
         dir：一个对象，在注册指令时作为参数传递
  
  vnode，虚拟节点
         一种模拟dom节点的数据结构
         其中包含的信息可以支撑vue去生成实际的dom节点，并正确同步所有用户设置的信息到dom上
         
  prevN　ode，上一个虚拟节点，仅在beforeUpdate和updated钩子中可用

三、DOM0，DOM1，DOM2，DOM3事件的区别

  1、Dom0级标准时不存在的，所谓的Dom0级只是DOM历史坐标中的一个参照点而已。具体来说，DOM0级指的是Internet Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML；一般在具体实践中，我们把onclick等事件直接写在html标签上的行为，归于DOM0级的事件操作

  2、DOM1级于1998年10月成为了W3C的推荐标准，DOM1级由两个模块组成：DOM核心和DOM HTML，DOM核心规定如何映射基于XML的文档结构，以便于简化对文档中的任意部分的访问与操作。DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。DOM1级的目标主要是映射文档的结构

  3、DOM2级引入了新模块：
         DOM视图：定义了跟踪不同文档（应用CSS之前和之后的文档）视图的接口
         DOM事件：定义了事件和事件处理的接口（通过ａｄｄＥｖｅｎｔＬｉｓｔｅｎｅｒ来绑定事件）
         DOM样式：定义了基于CSS为元素应用样式的接口
         DOM遍历和范围：定义了遍历和操作文档树的接口

  ４、DOM３级进一步扩展了DOM，例如ｌｏａｄ、ｓｃｒｏｌｌ、ｂｌｕｒ、ｆｏｃｕｓ、ｋｅｙｐｒｅｓｓ等

四、ES６的proxy

  Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

var a = {
	name: 'hhh',
	todo: 'hello'
}

//proxy拦截行为
let _handler = {
	//get用于拦截某个属性的读取操作，参数有目标对象、属性名、proxy实例本身
	get : function(target,-p) {
			if(target.name === 'hhh') 
			return 'hhhhhhhhhh'
	} ,
	//set用于拦截某个属性的赋值操作，参数有目标对象、属性名、属性值、proxy实例本身
	set : function(_obj,_prop,_val) {
		if(_prop === 'todo') 
		_obj[_prop] = 'todohhh'
	}
}

//targer 包装的对象，handler拦截的行为
let _proxyObj  = new Proxy (a, _handler )

五、vue的 mixins混入

作用：
更高效的实现组件内容的复用
将组件内部data、method等与父组件相应内容进行合并
相当于在引用后，父组件的各种属性、方法都被扩充了
本质：
其实就是对javaScript的深拷贝
对“对象”的”值“的传递、复制、合并
一定要分清javaScript的引用传递和值传递的区别
知识点：
创建混入对象
数据、对象的合并，以组件为优先

扩展：
this.$data 用于获得data里的数据

六、ES6中的Reflect

Reflect是ES6为了操作对象引入的新API
Reflect对象是一个全局的普通的对象，它的所有的属性和方法都是静态的

Reflect对象一共有13个静态的方法（具体的控制台打印）
Reflect并非一个构造函数，所以不能通过new运算符对其进行调用，或者将Reflect作为一个函数来调用

Reflect对象的作用：
将object对象的一些明显属于语言内部的方法（比如，object.defineProperty），放到Reflect对象上
修改某些Object方法的返回结果，让其变得更加合理

七、javaScript事件对象中的七种坐标

三大类：
1、相对于当前点击元素
2、相对于当前浏览器
3、相对于整个显示器

1、.clientX、.clientY
相对于用户浏览器的左上角的xy坐标
也就是窗口坐标，不包括工具栏、滚动条
2、.layerX、.layerY
相对于目标元素最近的具有absolute/relative定位元素的位置，包含border
3、.movementX、.movementY
两个鼠标移动事件间隔时间中当中鼠标移动的相对坐标
4、.offsetX、.offsetY
相对于你点击的那个dom节点的左上角的x、y坐标
5、.pageX、.pageY
获取的都是相对于当前浏览器，也就是文档左上角的x、y坐标
也就是文档左上角的x、y坐标
包括了被卷去的body部分的长度
6、.screenX、.screenY
相对于用户显示器的左上角的xy坐标

八、微任务、宏任务、DOM渲染执行顺序

微任务  --》 Dom渲染 --》 宏任务
不要在.then()中进行耗时的操作，会影响后续DOM渲染和宏任务

九、vue的provide和inject的父子组件传值问题

用处：
	父组件可以向其所有的子组件传入数据
	而不用管子组件的层级结构有多深
特性：
	父组件有一个provide选项来提供数据
	子组件有一个inject选项来使用这个数据