VUE 统计一个组件上使用了多少条指令

Question

我试着数了数 directives 在这样的组件上使用了多少。但它并没有像我预期的那样工作

这是我的指令文件

import ahoy from "ahoy.js"

let count = 0

export default {
  id: "bar",
  definition: {
    bind: (el, binding) => {
      const handler = (entries, observer) => {
        count++
        console.log(count)
        if (entries[0].isIntersecting) {
          setTimeout(() => {
            ahoy.track("impression", {
              ...(typeof binding.value === "object"
                ? { ...binding.value }
                : { value: binding.value }),

              page: document.title,
              path: window.location.pathname.replace(/^\/en\//g, "/"),
              class: el.classList.value
            })

            observer.unobserve(entries[0].target)
          }, 100)
        }
      }

      const createIntersection = new IntersectionObserver(handler, { rootMargin: "-45% 0%" })
      createIntersection.observe(el)
    }
  }
}

这就是我在我的组件上调用 directive 的方式

ReviewCard(
  v-bar="createIntersection(foo)"
)

未存储变量计数val++

如何计算组件上使用了多少指令？

提前致谢:)

Answer 1

count++ 当前在 handler 中，它被传递给 IntersectionObserver，因此 count 只会在交点处递增。该更新可能应该从 handler 移到 bind() 调用的根目录：

export default {
  definition: {
    bind: (el, binding) => {
      count++

      const handler = /*...*/
      //...
    }
  }
}

VUE 统计一个组件上使用了多少条指令

VUE Count how many directives are used on a component

javascript

vue.js

vue-directives