2021-03-03

vue

vue 是如何实现响应式数据的呢？
Vue2：Object.definProperty 重新定义 data 中所有的属性， Object.definProperty 可以使数据的获取与设置增加一个拦截的功能，拦截属性的获取，进行依赖收集。拦截属性的更新操作，进行通知。具体的过程：首先 Vue 使用 initData 初始化用户传入的参数，然后使用 new Observer 对数据进行观测，如果数据是一个对象类型就会调用 this.walk（value） 对对象进行处理，内部使用 defineReactive 循环对象属性定义响应式变化，核心就是使用 Object.definProperty 重新定义数据

image.png

js

js如何自定义事件
第一步创建事件，有两种方式（Event和CustomEvent）
Event()构造函数创建一个新的Event。

event = new Event（typeArg，eventInit）;
typeArg 事件名称。
eventInit 这是一个对象，包含以下字段：

• bubbles:(可选）Boolean指示事件是否冒泡。默认是false。
• cancelable:(可选）a Boolean表示是否可以取消该事件。默认是false。

第二步事件的监听
JS的EventListener是根据事件的名称来进行监听的，比如我们在上文中已经创建了一个名称为‘event_name’ 的事件，那么当某个元素需要监听它的时候，就需要创建相应的监听器：

第三步事件触发
对于一些内置（built-in）的事件，通常都是有一些操作去做触发，比如鼠标单击对应MouseEvent的click事件，利用鼠标（ctrl+滚轮上下）去放大缩小页面对应WheelEvent的resize事件。
然而，自定义的事件由于不是JS内置的事件，所以我们需要在JS代码中去显式地触发它。方法是使用 dispatchEvent 去触发（IE8低版本兼容，使用fireEvent）

var myEvent = new CustomEvent('event_name', {bubbles: true, cancelable: true});
window.addEventListener('event_name', function() {
  console.log('red');
})
window.dispatchEvent(myEvent)

想要进行数据传递就要使用CustomEvent创建自定义事件

var myEvent = new CustomEvent('event_name', {detail: {name: 'fufu', age: 20}});
window.addEventListener('event_name', function(event) {
  console.log(event.detail);   //test.html:12 {name: "fufu", age: 20}
})
window.dispatchEvent(myEvent)

WeakMap和WeakSet
WeakMap对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。键名所指向的对象可以被垃圾回收， 此时键名是无效的；不能遍历。

get() 返回key关联对象, 或者 undefined(没有key关联对象时)。

set()向WeakMap 实例添加一个新成员。

has()返回一个布尔值，表示某个值是否在WeakMap 实例中。

delete()清除WeakMap 实例的指定成员。WeakSet 对象允许你将弱保持对象存储在一个集合中。(只能是对象)

WeakSet对象允许你将弱引用对象存储在一个集合中。

add(value)向WeakSet实例添加一个新成员。

delete(value)清除WeakSet实例的指定成员。

has(value)返回一个布尔值，表示某个值是否在WeakSet实例中。