根据 onMounted() 生命周期钩子中的变量创建计算属性

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 访问它（未定义）。

如何重新构造我的代码，以便既可以从template 访问leftOffset，也可以访问在onMounted() 中找到的值？

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

Answer 1

您对ref 的使用是错误的。按照下面sn-p中的cmets。

这也是假设您不希望 window.innerwidth 具有反应性。

// 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})
})