Vue.js中当计算属性pageUser长度为0时调用doSomething方法的实现方式

方法1：使用watch监听计算属性 #

这是最符合Vue响应式设计的方案，直接监听pageUser的变化，当它的长度变为0时触发方法：

watch: {
  pageUser(newVal) {
    if (newVal.length === 0) {
      this.doSomething();
    }
  }
}

如果需要页面初始化时就触发一次（比如初始状态pageUser就是空数组），可以添加immediate: true：

watch: {
  pageUser: {
    handler(newVal) {
      if (newVal.length === 0) {
        this.doSomething();
      }
    },
    immediate: true
  }
}

方法2：模板中结合自定义指令实现（对应你提到的v-if场景） #

v-if本身不能直接调用方法，但可以配合自定义指令，利用元素渲染的时机触发方法：

首先注册局部指令：

directives: {
  triggerMethod: {
    inserted(el, binding) {
      // 元素插入DOM时调用传入的方法
      binding.value();
    }
  }
}

然后在模板中使用：

<div v-if="pageUser.length === 0" v-trigger-method="doSomething"></div>

当pageUser.length为0时，这个div会被渲染，触发指令的inserted钩子，进而调用doSomething。

不推荐的方案：在计算属性中添加副作用 #

Vue要求计算属性保持纯函数（不产生副作用），但如果是临时场景可以这么写，长期维护会增加代码复杂度：

computed: {
  pageUser() {
    const result = // 你的原计算逻辑代码
    if (result.length === 0) {
      this.doSomething();
    }
    return result;
  }
}

总结 #

优先选择watch监听的方式，逻辑清晰且符合Vue的设计原则；如果需要在模板层面触发，自定义指令是更规范的做法。

内容的提问来源于stack exchange，提问作者Sourabh