在计算属性中使用$refs

我如何访问$refs内部计算？第一次运行计算属性时始终未定义.

在这里回答我自己的问题,我在其他地方找不到满意的答案.有时你只需要访问一个dom元素来进行一些计算.希望这对其他人有帮助.

安装组件后,我不得不欺骗Vue更新计算属性.

Vue.component('my-component', {
    data(){
        return {
            isMounted: false
        }
    },
    computed:{
        property(){
            if(!this.isMounted)
                return;
            // this.$refs is available
        }
    },
    mounted(){
        this.isMounted = true;
    }
})

如果您需要$refs后v-if可以使用updated() 钩子.

updated() {
    if (!this.myProp) return;
    /// this.$refs is available
},

我认为引用Vue js指南很重要：

$ refs仅在呈现组件之后填充，并且它们是无反应的。它仅用作直接子操作的转义线-您应避免从模板或计算的属性中访问$ refs。

因此，尽管您总是可以绕开它，但是这不是您应该做的事情。