根据onMounted（）生命周期挂钩中的变量创建计算属性

vue.js vuejs3 vue-composition-api

我有一个组件需要使用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访问它（它是未定义的）。

我如何re-structure我的代码，以便leftOffset既可以从template访问，也可以访问onMounted()中的值？

我在网上搜索过，但找不到任何特定于CompositionAPI的内容。

✅ 最佳回答：

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

这也是假设您不希望window.innerwidth是reactive。

// 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为reactive，则必须像这样使用本机事件侦听器；

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