vue3在setup中将函数赋给对象外调用，访问不到setup内部变量

由于对js函数使用并不熟练，写vue的时候遇到一个坑，在setup中封装一个函数foo，用于操作对象内的变量，并把foo挂上window.addEventListener，结果发现event触发的时候，访问不到setup内的变量。
于是用下面这段原生js代码找出了问题：

const obj = {
  count: 1,
  foo: () => {
    window.addEventListener("mousedown", () => {
      console.log(obj)
      console.log("count:", this.count);
      console.log(count)
    })
  }
}
obj.foo()

点击鼠标可以看到，无论是count，还是this.count，都访问不到count。
当函数运行时，访问的像count这样的变量是根据实际运行的函数调用栈，一层层往外找的。而在对象方法访问像this.count这样的变量，就无论在什么调用栈中，都可以找到对象内的变量。在一般情景下，setup里封装的函数，也是在vue创建的对象中调用的，所以操作变量时感受不到调用栈的差异。但如果把封装的函数给到对象外部运行，就会有上述找不到对象内变量的问题。
这种函数里访问对象变量和闭包访问变量看起来相似，但其实有很大不同，闭包函数实际上保证了函数运行时和变量在同一个调用栈里。
那么如何访问到对象内的变量呢？在原生js里可以把foo作为普通function，然后用this来访问:

const obj = {
  count: 1,
  foo: function() {
    window.addEventListener("mousedown", () => {
      console.log(obj)
      console.log("count:", this.count);
    })
  }
}
obj.foo()

但是vue并不建议在setup里强行访问this，getCurrentInstance的写法代码过于丑陋。所以还是用回vue2的写法，在setup外的mounted之类的生命周期钩子函数里，注册window.addEventListener，此时就可以使用this来解决问题了。

mounted() {
  window.addEventListener("mousedown",()=>{
    console.log(this.mouse_down_count)
  })
},

也有更简单的做法，把变量放到模块内的全局变量位置上就可以了。

标签：count,console,变量,setup,访问,vue3,赋给,foo
来源： https://www.cnblogs.com/crazyfz/p/16311648.html