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