为啥从模板或观察者调用时 this 范围会发生变化?

Posted

技术标签:

【中文标题】为啥从模板或观察者调用时 this 范围会发生变化?【英文标题】:Why does the this scope change when calling from a template or watcher?为什么从模板或观察者调用时 this 范围会发生变化? 【发布时间】:2020-08-22 15:07:30 【问题描述】:

关于包含所有代码的previous question,我想知道为什么它可以正常工作:

<template>
  <q-drawer
    @mouseover="setMiniState(false)"
    @mouseout="setMiniState(true)"
</template>

<script>
import  defineComponent, ref, watch  from '@vue/composition-api'

export default defineComponent(
  setup() 
    const miniState = ref(true)

    function setMiniState(state) 
      console.log('setMiniState widht is ', this.$q.screen.width)
    

    return 
      miniState, setMiniState
    
  
)

但这不是:

    function setMiniState(state) 
      console.log('setMiniState widht is ', this.$q.screen.width)
    

    watch('$q.screen.width', () => setMiniState())

当观察者被调用时,变量$q变成undefined,当从模板调用相同的函数时,情况就不是这样了。似乎this 作用域正在改变setMiniState 函数的调用方式。

解决方法 1

如果参数width 可用,请检查函数setMiniState

<template>
  <q-drawer
    @mouseover="setMiniState(false)"
    @mouseout="setMiniState(true)"
</template>

function setMiniState(state, width) 
  let screenWidth = ''
  if (!width) 
    screenWidth = this.$q.screen.width
   else 
    screenWidth = width
  
  console.log('setMiniState this is ', screenWidth)


watch('$q.screen.width', (width) => setMiniState(undefined, width))

解决方法 2

始终发送statewidth 参数:

<template>
  <q-drawer
    @mouseover="setMiniState(false, $q.screen.width)"
    @mouseout="setMiniState(true, $q.screen.width)"
</template>

function setMiniState(state, width) 
  console.log('setMiniState this is ', width)


watch('$q.screen.width', (width) => setMiniState(undefined, width))

我是 javascript 的新手,并试图了解正在发生的事情。感谢您就如何最好地处理此类情况提供帮助和/或建议。

【问题讨论】:

【参考方案1】:

你为什么写'$q.screen.width'

试试这个:

watch(() => this.$q.screen.width, setMiniState)

【讨论】:

以上是关于为啥从模板或观察者调用时 this 范围会发生变化?的主要内容,如果未能解决你的问题,请参考以下文章

为啥这个函数调用的执行时间会发生变化?

为啥在浏览器中调用和显示时存储在 localStorage 中的 HTML 会发生变化?

为啥尽管观察者的状态发生变化,但应用程序重启后 Flutter BloC UI 没有更新?

VueJS 观察属性和改变数据

为啥调用 location.reload(); 后我的表中的行顺序会发生变化?关闭模态框时

为啥使用 Hadoop 处理后数据大小会发生变化?