vue什么时候才能操作dom？

Question

mounted() {
    this.$refs.index.style.paddingBottom = this.$refs.sus.clientHeight + 'px'
}

试着在mounted声明周期去获取某元素的高度，但是仍然获取到的是0，即使是DOMContentLoad 或者 window.onload 后仍然取不到。

那vue要什么时候才能获取dom的实际计算结果？

Answer 1

就是在mounted的时候，如果你要获取的元素高度是动态由数据撑起来的需要使用this.$nextTick

<div id="app">
    <div id="example">
    <my-component></my-component>
  </div>
</div>

new Vue({
  template: `<h1 ref=test>1</h1>`,
  created: function(){
    console.log('created')
    debugger
  },
  mounted: function(){
    console.log('mounted')
    console.log(this.$refs.test.clientHeight)
    debugger
  }
}).$mount('#app')

可测试上方代码。

Answer 2

nexttick

Answer 3

this.$nextTick

Answer 4

试试看this.$nextTick

mounted (){
    this.$nextTick(() => {
        this.$refs.index.style.paddingBottom = this.$refs.sus.clientHeight + 'px';
    });
}

Answer 5

不要用$refs去查节点，它不是响应式的。

Answer 6

绑定对应的事件就可以

methods:{
    this.$nextTick(() => {
        this.$refs.index.style.paddingBottom = this.$refs.sus.clientHeight + 'px';
    })
}

Answer 7

this.$nextTick 后可以做，但是为什么要去通过dom获取高度，什么需求，说出来，可能存在不需要操作dom的方法

Answer 8

created的时候，看声明周期就知道了。