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

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

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

Answer 1

您对 ref 的用法是错误的。按照以下代码段中的评论进行操作。

此外，这是假设您不希望 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})
})

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

Create computed property dependent on variables within onMounted() lifecycle hook

vue.js

vuejs3

vue-composition-api

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

Create computed property dependent on variables within onMounted() lifecycle hook

vue.js

vuejs3

vue-composition-api

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