为啥从模板或观察者调用时 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
始终发送state
和width
参数:
<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 没有更新?