创建依赖于onMounted()生命周期钩子中的变量的computed属性

Question

我有一个需要使用DOM计算一些值的组件，因此我有onMounted()生命周期钩子。在onMounted()中，我计算了一些依赖于DOM元素的值(技术上，它们是计算属性)。

然后使用在另一个计算属性leftOffset中找到的值。我需要在template中使用leftOffset(它改变了一些CSS，不是真正相关的)。

下面是我的setup():

setup() {
let showContent = ref(false);

let windowWidth = ref(null);
let contentHider = ref(null);
let contentHiderXPos ;
let contentHiderWidth ;
let leftWidth;
onMounted(() => {
// The DOM element will be assigned to the ref after initial render
windowWidth = ref(window.innerWidth);
contentHiderXPos = computed(() => contentHider.value.getBoundingClientRect().left);
contentHiderWidth = computed(() => contentHider.value.getBoundingClientRect().width);
leftWidth = computed(() => contentHiderXPos.value + contentHiderWidth.value);
});
let leftOffset = computed(() => {
return -(windowWidth.value - leftWidth.value)
});
return {
contentHider,
leftOffset,
}

contentHider引用了template中定义的div的一个DOM元素。

我的问题是leftOffest.value是未定义的，因为它试图访问windowWidth.value和leftWidth.value，这也是未定义的。我也试过把leftOffset放在onMounted()里面，但是我不能从template访问它(它是未定义的)。

我如何重构我的代码，使leftOffset既可以从template访问，也可以访问onMounted()中的值?

我已经在网上搜索过了，但是找不到任何特定于组合API的内容。

Answer 1

您对ref的使用是错误的。按照下面代码片段中的注释进行操作。

同样，这是假设您不需要窗口。

// dont create another ref => you are trying to assign a new object here, thus breaking the reactivity
// windowWidth = ref(window.innerWidth);
// do this instead
windowWidth.value = window.innerWidth

如果你想让innerWidth响应，你必须像这样使用本机事件监听器;

const windowWidth = ref(window.innerWidth)
onMounted(() => {
window.addEventListener('resize', () => {windowWidth.value = window.innerWidth} )
})
onUnmounted(() => {
window.removeEventListener('resize', () => {windowWidth.value = window.innerWidth})
})