使用场景
1、created里面操作dom
例子
<template>
<section>
<div ref="hello">
<h1>Hello World ~</h1>
</div>
<el-button type="danger" @click="get">点击</el-button>
</section>
</template>
<script>
export default {
methods: {
get() {
}
},
mounted() {
console.log(333);
console.log(this.$refs['hello']);
this.$nextTick(() => {
console.log(444);
console.log(this.$refs['hello']);
});
},
created() {
console.log(111);
console.log(this.$refs['hello']);
this.$nextTick(() => {
console.log(222);
console.log(this.$refs['hello']);
});
}
}
</script>
控制台输出
从输出可以看到,先执行created输出111,接着通过ref获取dom输出undefined,然后执行mounted输出333以及dom,然后是created里面的nexttick执行,最后是mounted里面的nexttick执行