[JavaScript知识库]vue之$nextTick(callback)

vue之$nextTick(callback)作用

• this.$nextTick(callback) 作用：处理vue中的dom异步更新，粗暴的说就是dom渲染之后，就会执行callback函数

<template>
  <div>
    <div ref="msgRef">about1 {{ msg }}</div>
    <button @click="btn">修改msg</button>
  </div>
</template>

<script>
export default {
  name: "About1",
  components: {},
  data() {
    return {
      msg: "我是msg啊",
    };
  },
  methods: {
    btn() {
      this.msg = "我是修改后的msg";
      console.log("msg", this.msg); // msg 我是修改后的msg
      console.log("msgRef", this.$refs.msgRef.innerHTML); // msgRef about1 我是msg啊
      // vue执行dom节点更新是异步状态的，但是数据更改是同步的，因此在数据层面发生改变展示在页面上，
      // 实际上dom节点还未更新，因此拿到还是之前的值
      // this.$nextTick(callback) 作用：处理vue中的dom异步更新，粗暴的说就是dom渲染之后，就会执行callback函数
      this.$nextTick(() => {
        console.log("nextTick", this.$refs.msgRef.innerHTML); // nextTick about1 我是修改后的msg
      })
    },
  },
};
</script>

vue之$nextTick(callback)源码

• 待续。。。