Map 与 WeakMap的区别
JavaScript 中的 Map 和 WeakMap 提供了类似的功能 ——都是为了存储键值对——但是它们在一些关键点上有显著的不同：
-
键的类型：Map 可以接受任何类型的键（包括基本类型和对象类型），而 WeakMap 只接受对象作为键。
-
强/弱引用：Map 维持着对键的强引用，这意味着只要 Map 存在并且包含这个键，那么它就不会被垃圾回收掉。相反，WeakMap 维持着对键的弱引用，即当没有其他地方引用此对象时，垃圾回收器会自动回收该键所引用的对象，并从 WeakMap 中删除对应的条目。
-
可迭代：Map 是可迭代的，可以使用例如 for...of 循环、keys()、values()、entries() 方法遍历整个 Map。但是 WeakMap 不可迭代。
-
获取大小：Map 有一个 size 属性，你可以使用它来获取 Map 中元素的数量。但是 WeakMap 没有这个属性，你不能知道 WeakMap 中有多少元素。
总的来说，当你需要一个映射关系并且希望手动管理对象的生命周期时，你应该选用 Map；当你需要一个映射关系并希望为对象的生命周期交由JavaScript引擎自动管理时，可以优先考虑 WeakMap。
vue3 自定义指令
在 Vue3中，自定义指令的定义有些许变化。下面是一个创建自定指令的示例：
export default {
directives: {
focus: {
// 当被绑定的元素挂载到 DOM 中时……
mounted(el) {
// 聚焦元素
el.focus();
},
},
},
};
你可以看到，之前的 bind 和 inserted 钩子在 Vue 3 中被 mounted 取代，同时 unbind 钩子在 Vue 3 中改为 unmounted。
在Vue3中定义指令主要有以下钩子可用：
- beforeMount : 对应2.x版本的 bind。只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。
- mounted : 对应2.x版本的 inserted。元素插入父节点时会被调用（父节点存在，但不一定已经被插入文档中）。
- beforeUpdate : 新增。在元素更新之前触发。
- updated: 对应2.x版本的 update。所在组件的 VNode 更新时调用。
- beforeUnmount : 新增。卸载指令之前触发。
- unmounted : 对应2.x版本的 unbind。只调用一次，指令与元素解绑时调用。
每个函数都接收如下参数：
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- binding : 一个对象，包含以下属性：
- instance : Vue3中新增。正在更新的组件实例。
- value : 指令的绑定值，例如：ˋv-my-directive="1 + 1"ˋ， value 的值是 2。
- oldValue : 指令绑定的前一个值。无论是否等于当前值，都可用。
- arg : 传给指令的参数，可选。例如ˋv-my-directive:fooˋ，arg 的值是 "foo"。
- modifiers : 一个包含修饰符的对象。例如: ˋv-my-directive.foo.barˋ，modifiers的值是 { foo: true, bar: true }
- dir: Vue3中新增。
- beforeMount 对应 bind。
- mounted 对应 inserted 。
- beforeUpdate 对应 update。在2.x中，这个钩子在父组件的 VNode 和子 VNode 更新之前被调用。
- updated: 对应 componentUpdated。在2.x中，这个钩子在父组件的 VNode 和子 VNode 更新后调用。
- beforeUnmount : 对应 unbind。在2.x中，只调用一次，指令与元素解绑时调用。
- unmounted: 指令所在组件卸载后调用。
ResizeObserver
在日常开发中有时需要根据浏览器窗口大小变化，作出相应的变化，因此可以封装一个自定义指令来监听窗口的变化
ResizeObserver 是一个可以监听到 Element 或 SVGElement 的内容尺寸变化的接口。这使得我们能够观察到任何元素在其内容方面的变化——而不只是基于其窗口大小的变化。
以下是创建一个新的 ResizeObserver 的例子，每当被其观察的元素发生尺寸变化时都会在 Console 中打印其新的尺寸：
// 新建一个新的 ResizeObserver 实例，将观察到的更改输出至 Console
var resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
console.log('Size of', entry.target, 'has changed:', entry.contentRect);
}
});
// 开始观察一个元素的尺寸变化
resizeObserver.observe(document.querySelector('div'));
在上述代码中，entries 是数组，里面包含着 ResizeObserverEntry 对象，每个对象代表了一个观察到的元素。每个 ResizeObserverEntry 对象都有一个 contentRect 属性，其值是一个具有 width、height、top、right、bottom 和 left 信息的 DOMRectReadOnly 对象。
// 要停止观察一个或多个元素，可以使用 ResizeObserver 实例的 unobserve 方法：
resizeObserver.unobserve(target);
// 要停止观察所有元素，可以使用 disconnect 方法：
resizeObserver.disconnect();
得注意的是，ResizeObserver 是一个相对较新的特性，还没有被所有浏览器全面支持，可以通过 https://caniuse.com/resizeobserver 查看具体的支持情况。
监听元素变化指令
在日常开发中有时需要根据dom元素大小变化，作出相应的变化，因此可以封装一个自定义指令来监听dom元素的变化
// 为每个调用指令的dom元素绑定回调函数
<q-input v-focus-border="handleWidth" placeholder="红色边框" />
<script>
// 不使用Map防止dom消失而Map中的对象未删除而导致的内存泄漏
const elMap = new WeakMap()
const ob = new ResizeObserver((entries) => {
for (const item of entries) {
let handleFun = elMap.get(item.target)
handleFun(item.target)
}
})
export default {
directives: {
'focus-border': {
mounted(el, binding) {
// binding.value 可以拿到指令绑定的回调函数
elMap.set(el, binding.value)
ob.observe(el)
},
unmounted(el) {
// 解除绑定时需要解除监听
ob.disconnect()
}
}
},
data () {
return {}
},
methods: {
handleWidth(size) {
console.log('handleWidth-------------size', size)
}
}
}
</script>
网友评论