封装resize指令

Map 与 WeakMap的区别

JavaScript 中的 Map 和 WeakMap 提供了类似的功能 ——都是为了存储键值对——但是它们在一些关键点上有显著的不同：

1. 键的类型：Map 可以接受任何类型的键（包括基本类型和对象类型），而 WeakMap 只接受对象作为键。

2. 强/弱引用：Map 维持着对键的强引用，这意味着只要 Map 存在并且包含这个键，那么它就不会被垃圾回收掉。相反，WeakMap 维持着对键的弱引用，即当没有其他地方引用此对象时，垃圾回收器会自动回收该键所引用的对象，并从 WeakMap 中删除对应的条目。

3. 可迭代：Map 是可迭代的，可以使用例如 for...of 循环、keys()、values()、entries() 方法遍历整个 Map。但是 WeakMap 不可迭代。

4. 获取大小：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>