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

2022-05-26 03:00:06 阅读：269 来源： 互联网

标签：count console 变量 setup 访问 vue3 赋给 foo

由于对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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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