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");

可以正常得到该div

display中同样的调用

document.getElementById("area");

结果竟然返回空？？？

Answer 1

原因就是watch: {&nbsp; &nbsp; &nbsp; 'bookDetail' : 'display'&nbsp; &nbsp; },执行的太早了，dom没有渲染完全，改成watch: {&nbsp; &nbsp; &nbsp; bookDetail(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(()=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.display()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },20);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }另外为什么不用ref来取dom呢？