使用nextTick,获取修改后的页面元素的值

<template>
  <div>
      <div ref="box" id="box">{{msg}}</div>
      <button @click="changeDomText">点击修改Dom元素的innerHtml</button>
  </div>
</template>

<script>
export default {
    data () {
        return {
            msg:" 我是谁"
        }
    },
    methods: {
        changeDomText(){
            this.msg="皮卡丘"
            console.log(this.msg);  //皮卡丘
            console.log(this.$refs.box.innerHTML);  //我是谁
            console.log(document.getElementById('box').innerHTML)  //我是谁
            // 可以思考,值是已经发生改变,但是页面渲染需要一段时间 所以我们拿到的还是我是谁
            // 可以使用this.nextTick回调函数
            this.$nextTick(()=>{
                console.log(this.$refs.box.innerHTML);  //皮卡丘
            console.log(document.getElementById('box').innerHTML)  //皮卡丘
            })
        }
    }
}
</script>

总结

    是因为页面渲染需要时间，我们的js渲染十分快，修改值后我们获取的dom元素其实还没有渲染完成,
还是求旧的值，所以我们需要nextTick获取已经渲染完成的dom元素