关于 vue 组件生命周期何时获取到$refs 值的问题

Question

我有个页面如下,组件是第三方库vueSeamlessScroll

<vue-seamless-scroll ref="scroll" :data="[1,2,3,4]"></vue-seamless-scroll>

生命周期
mounted(){
    console.log(this.$refs.scroll)//获取到的是 undefined
}

请教各位大佬请问 不应该在 mounted 生命周期获取吗?

Answer 1

父子组件是子先mounted，然后才是父mounted，随便写个demo就能得到答案，题主你的问题不在于生命周期的顺序，我按照这个组件github中的样例改了一下，是能够正常获取的。有可能是外层包了v-if什么的导致根本没有渲染吧

Answer 2

你的vue-seamless-scroll组件在当前页面中相当于一个子组件，组件中包含组件，形成父子组件，这时候的生命周期应该是这样：

// 会省略部分生命周期
父组件创建--created
子组件创建--created
子组件挂载--mounted
父组件挂载--mounted
子组件销毁--destroyed
父组件销毁--destroyed

Answer 3

在create也可以获取，需要添加$nextTick

created() {
    this.$nextTick(() => {
        console.log(this.$refs.scroll)
    })
}

Answer 4

mounted不确保子组件已经挂载