1.created的时候dom还没有加载完成
2.mounted的时候dom 加载完毕
<template>
<section>
<div ref="hello">
<h1>Hello World ~</h1>
</div>
<button type="danger" @click="get">点击</button>
</section>
</template>
<script>
export default {
methods: {
get() {
console.log('111');
},
},
mounted() {
console.log('mounted');// 3
console.log(this.$refs.hello); // 4
this.$nextTick(() => {
console.log(444);// 7
console.log(this.$refs.hello);// 8
});
},
created() {
console.log('created');// 1
console.log(this.$refs.hello); // 2 dom还没加载完 undefined
this.$nextTick(() => {
console.log(222);// 5
console.log(this.$refs.hello);//6
});
},
};
</script>
代码后面的数字是执行顺序