Vue计算属性在filter中引用this不生效的原因及写法差异解析

嘿，这两个问题本质上是同一个原因——JavaScript的this绑定规则在背后起作用！让我给你详细拆解：

问题1：为什么Vue不会运行/更新在filter函数中引用this的计算属性？ #

当你在Array.filter()里使用普通函数作为回调时，这个回调函数的this并不会指向你的Vue组件实例。这是因为filter方法调用回调时，默认情况下会把回调的this绑定到全局对象（浏览器环境下是window，严格模式下是undefined），完全和Vue实例没关系。

这就导致两个核心问题：

• 你根本拿不到期望的this.filterID（因为这里的this不是Vue实例）；
• Vue的依赖追踪系统也无法检测到你对this.filterID的引用，自然不会触发计算属性的更新。

问题2：两种写法的差异原因 #

先看一下两种写法的直观对比：

无效写法（直接在filter回调中用this） #

computed: {
  filteredItems() {
    return this.items.filter(function(item) {
      // 这里的this不是Vue实例！
      return item.id === this.filterID; 
    });
  }
}

有效写法（提前存this.filterID到变量） #

computed: {
  filteredItems() {
    // 先把Vue实例的filterID存到当前作用域的变量里
    const currentFilterID = this.filterID; 
    return this.items.filter(item => {
      // 通过闭包访问currentFilterID，这个值绑定到Vue实例的属性
      return item.id === currentFilterID; 
    });
  }
}

差异的核心逻辑：

1. 有效写法中，你提前把this.filterID赋值给了当前作用域的变量currentFilterID。filter的回调函数可以通过闭包访问到这个变量，而这个变量指向的是Vue实例的filterID属性。Vue能正常追踪到这个依赖，所以当filterID变化时，计算属性会重新计算。
2. 无效写法中，回调是普通函数，它的this和Vue实例无关，this.filterID要么是undefined，要么是全局对象上的无关属性，既拿不到正确的值，Vue也无法追踪依赖，自然就失效了。

额外补充：另一种有效写法（箭头函数） #

其实你也可以用箭头函数作为filter的回调，因为箭头函数不会绑定自己的this，它的this继承自外层作用域（也就是计算属性的函数，这里的this就是Vue实例）：

computed: {
  filteredItems() {
    return this.items.filter(item => item.id === this.filterID);
  }
}

这种写法同样有效，和提前存变量的原理类似，都是让回调能正确访问到Vue实例的属性，同时被Vue的依赖系统追踪。

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