Vue自定义指令在数据变化时怎么不重新执行？

指令不会因为数据变化自动重新执行，你得用 componentUpdated 钩子监听更新。

Vue.directive('resize', {

  bind(el, binding) {

    const update = () => binding.value(el.offsetHeight)

    window.addEventListener('resize', update)

    el.__resizeUpdate__ = update

  },

  componentUpdated(el, binding) {

    binding.value(el.offsetHeight)

  },

  unbind(el) {

    window.removeEventListener('resize', el.__resizeUpdate__)

  }

})

你遇到的问题是因为 Vue 自定义指令的生命周期钩子 bind 只会在指令第一次绑定到元素时触发，之后数据变化或者 DOM 状态变化时，它不会自动重新执行。所以你需要用其他钩子函数来监听这些变化。

第一步，咱们得明白 Vue 自定义指令有几个关键的钩子函数：
- bind：只调用一次，指令绑定到元素时。
- inserted：元素插入父节点时调用。
- update：所在组件的 VNode 更新时调用，但注意性能问题，可能会被优化跳过。
- componentUpdated：所在组件的 VNode 及其子组件的 VNode 全部更新后调用。
- unbind：指令从元素上解绑时调用。

针对你的需求，需要在元素高度变化时重新触发逻辑，可以利用 componentUpdated 钩子，同时还需要监听窗口大小变化。

第二步，我们改写一下你的指令代码：

Vue.directive('resize', {

  bind(el, binding) {

    // 定义更新逻辑

    const update = () => {

      // 调用传入的方法，传入当前元素的高度

      if (typeof binding.value === 'function') {

        binding.value(el.offsetHeight)

      }

    }



    // 绑定窗口大小变化事件

    el.__resizeHandler__ = update

    window.addEventListener('resize', el.__resizeHandler__)

  },

  componentUpdated(el, binding) {

    // 在组件更新时也重新计算高度

    if (typeof binding.value === 'function') {

      binding.value(el.offsetHeight)

    }

  },

  unbind(el) {

    // 清理事件监听器，避免内存泄漏

    if (el.__resizeHandler__) {

      window.removeEventListener('resize', el.__resizeHandler__)

      delete el.__resizeHandler__

    }

  }

})

第三步，解释一下代码改动的原因：
1. bind 中添加了事件监听器，并且把回调存储在元素的一个私有属性里（__resizeHandler__），方便后续清理。
2. componentUpdated 是重点，当组件更新时会触发这个钩子，这样可以捕获到由于 padding 或者其他样式变化导致的高度改变。
3. unbind 用来清理事件监听器，确保组件销毁时不会留下垃圾代码。

第四步，使用这个指令时不需要额外修改，直接像原来一样用就可以了：
v-resize="handleHeight"

其中 handleHeight 是你定义的处理函数，比如这样：

methods: {

  handleHeight(height) {

    console.log('当前高度:', height)

  }

}

最后提醒一点，自定义指令虽然强大，但如果逻辑特别复杂的话，可能需要用渲染函数或者更高级的组合式 API 来实现类似功能。不过对于监听页面高度变化这种场景，上面的方案已经足够用了。

试试看，应该能解决你的问题！如果还有其他疑问随时问哈。