vue.js 遇到的一个奇怪的问题，帮忙看看

Question

这是一个router中components的template:<template>  <div class="readerView">    <div id="area"></div>  </div></template><script>  export default {    name: 'readerView',    props: {      bookDetail: Object,    },    data () {      return {      }    },    watch: {      'bookDetail' : 'display'    },    methods: {      display() {        var area = document.getElementById("area");        console.log("in display, area: ", area);      }    },    mounted () {      var area = document.getElementById("area");      console.log("in mounted, area: ", area);    },  }</script><style>@import url("../style/basic.css");.readerView {  position: absolute;  width: 100%;  height: 100%;}</style>在该组件的mounted函数中调用document.getElementById("area");可以正常得到该divdisplay中同样的调用document.getElementById("area");结果竟然返回空？？？

Answer 1

原因就是

watch: {

      'bookDetail' : 'display'

    },

执行的太早了，dom没有渲染完全，改成

watch: {

      bookDetail(){

          setTimeout(()=>{

              this.display()

          },20);

      }

    }

另外为什么不用ref来取dom呢？