created里面怎么拿取dom之$nextTick怎么用？

1、created里面怎么拿取dom这里我用了两种方法一是 $nextTick 和 setTimeout ，一个是次 DOM 更新循环之后执行，一个是可以转换异步操作

<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对象，而通过this.$nextTick()获取到的值为dom更新之后的值

2、this.$nextTick()在下次 DOM 更新循环之后执行的延迟回调。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

<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

created里面怎么拿取dom之$nextTick怎么用？

猜你喜欢