• 欢迎光临~

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

开发技术 开发技术 2022-05-26 次浏览

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

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

点击鼠标可以看到,无论是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()

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

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

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

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

喜欢 (0)