1.$refs

• 获取到原生dom标签或者子组件实例

<template>
  <div>
    <h1 ref="myH1">1. ref获取原生dom</h1>
    <button @click="fn">点击修改上面内容</button>
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      console.log(this.$refs.myH1); // <h1></h1> 原生DOM标签
      this.$refs.myH1.innerHTML = "改内容了";
    }
  }
}
</script>

2.$nextTick

背景

• 数据变化而导致的dom更新是异步的

<template>
  <div>
    <p id="num">数字: {{ count }}</p>
    <button @click="btn">点击+1, 观察打印</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    btn() {
        this.count++; // 数字添加后, 异步更新DOM, 所以马上获取标签的值还是0
        console.log(document.getElementById('num').innerHTML); // 0
        this.$nextTick(() => {
            console.log("DOM更新后触发$nextTick函数");
            console.log(document.getElementById('num').innerHTML); // 1
        })
    },
  },
};
</script>