created里面怎么拿取dom之$nextTick怎么用？(1)，JavaScript基础面试题

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);

},

};

可以根据打印的顺序看到，在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作并无作用，而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象，而通过this.$nextTick()获取到的值为dom更新之后的值

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

{{ value }}

<button type=“danger” @click=“get”>点击