1.$nextTick的作用
获取更新后的dom
beforeCreate、created、beforeMount想要获取dom，就要使用nextTick
我的axios封装笔记
<template>
<div>
<ul id = 'uls'>
<li v-for = 'item in list' :key = item.id>
<img :src='item.imageUrl'>
</li>
</ul>
</div>
<script>
import { ABC } from 'xxx/api/course.js'
//ABC来自axios的二次封装，需要了解axios二次封装方法的详情请点击上方我的axios封装笔记
export default {
data(){
return {
list:[]
}
},
beforeCreate(){
console.log(document.getElementById('uls')) //undefined
//在beforeCreate中是获取不到data和dom，但是我们使用了nextTick后
this.$nextTick(() => {
console.log(document.getElementById('uls')) //<ul id='uls'>...</ul>
})
}
}
</script>
</template>
2.原理
<body>
<div id="app">这是一个dom</div>
</body>
<script type="text/javascript">
class Vue {
constructor(options){
this.data = options.data;
this.$el = document.querySelector(options.el)
options.created.bind(this)();
}
$nextTick(callback){
return Promise.resolve().then(() => {
callback();
})
}
}
new Vue({
el:'#app',
data:{
str:'你好'
}
created(){
console.log(this.$el, this.$data); //undefined {str:'你好'}
this.nextTick(() => {
console.log(this.$el, this.$data); //<div id="app">这是一个dom</div> {str:'你好'}
})
}
})
</script>
