vue3: setup()中ref组件的值使我困惑

Question

我的项目是基于ve3的，我使用了'element-plus'提供的名为'el-tree'的组件。为了访问，我定义了一个名为"tree"的变量，其值在setup()方法中为ref(null)。然后我在模板代码中写了一个名为'el-tree'中的'tree'属性。

我认为在整个setup()方法中'tree'的ref值为null。但是为什么它有价值，当我在promise的回调函数中记录它。

模板

<template>
<el-card>
<el-tree
:data="menuTreeList"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
</el-card>
</template>

设置()方法

setup(){
...
const tree = ref(null)
const puzzleValue = function(){
console.log(tree.value) // null
Promise.resolve().then(()=>{
console.log(tree.value) //Proxy{}
})
}
puzzleValue()
...
}

Answer 1

您在定义tree之后访问它，但在创建组件之前，这就是为什么它仍然不是Proxy。在组件创建后，所有的ref将变成Proxy。这就是为什么当promise被解析时，你可以看到值的变化。

为了不发生这种情况，你应该确保在setup函数中定义ref之后永远不要访问它们。始终使用生命周期钩子:

setup(){
const tree = ref(null)
const puzzleValue = function(){
console.log(tree.value)
Promise.resolve().then(()=> {
console.log(tree.value)
})
}
onMounted(() => puzzleValue()) // now, tree.value will be a Proxy consistently
}