$ nextTick of domを作成するにはどうすればよいですか？

1. domを作成する方法ここでは、2つのメソッドを使用します。1つは$ nextTickとsetTimeoutで、もう1つはDOM更新サイクルの後に実行され、もう1つは非同期操作を変換する方法です。

<template>
  <div class="">
    {
   
   { num }}
    <button ref="button" @click="num++">加1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
    };
  },
  mounted() {},
  methods: {
    arr() {
      console.log("methods 中的钩子函数");
    },
  },
  components: { },
  beforeCreate() {
    console.log("页面a----" + "beforeCreate", this.num); 
  //创建前的阶段 此时data中的数据未  定义不能访问data中的数据

  },
  created() {
    console.log("页面a----" + "created", this.num); 
    // 创建后 最早可以访问data 和 methods中数据的钩子
    this.$nextTick(()=>{
      console.log(this.$refs.button); // 这两种方式都可以拿到dom
    })
    setTimeout(() => {
      console.log(this.$refs.button);
    });
  },
  beforeMount() {
    // 挂载前 指令已经解析完毕内存中已经生产dom树 但是还没有渲染到本地

    console.log("页面a----" + "beforeMount", this.num);
  },
  mounted() {
    // 最早可以操作 dom 的钩子
    console.log("页面a----" + "mounted", this.num);
  },
  beforeUpdate() {
    console.log("页面a----" + "beforeUpdate", this.num);
  },
  updated() {
    console.log("页面a----" + "updated", this.num);
  },
  beforeDestroy() {
    console.log("页面a----" + "beforeDestroy", this.num);
  },
  destroyed() {
    console.log("页面a----" + "destroyed", this.num);
  },
};
</script>

<style lang="scss"></style>

印刷の順序から、created（）フック関数を実行すると、DOMは実際にはレンダリングを実行せず、この時点ではDOM操作は効果がないことがわかります。また、createdでthis。$ nextTick（）を使用します。（）待機可能domが生成された後、domオブジェクトが取得され、これによって取得された値。$ nextTick（）は、dom更新後の値です。

2.This。$nextTick（）は、次のDOM更新ループの後に実行される遅延コールバックです。データを変更した直後に使用し、DOMが更新されるのを待ちます。これは、コールバックのthisがそれを呼び出したインスタンスに自動的にバインドされることを除いて、グローバルメソッドVue.nextTickと同じです。

<template>
  <section>
    <h1 ref="hello">{
   
   { value }}</h1>
    <button type="danger" @click="get">点击</button>
  </section>
</template>
<script>
export default {
  data() {
    return {
      value: "Hello World ~",
    };
  },
  methods: {
    get() {
      this.value = "你好世界";
      console.log(this.$refs["hello"].innerText); //  它的结果就不是dom更新后的结果
      this.$nextTick(() => {
        console.log(this.$refs["hello"].innerText); 
        //  在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，
      });
       setTimeout(() => { 
           console.log(this.$refs["hello"].innerText);
        });
    },
  },
};
</script>

szh

$ nextTick of domを作成するにはどうすればよいですか？

おすすめ