一、知识点部分
- $nextTick():基于更新后的视图来搞点事情,我们可以使用$nextTick(callback)。这里的回调函数(callback)将在数据更新完成,视图更新完毕之后被调用。(可以联想一下在angular1.x开发过程中,在接收到返回值的时候有时候需要使用setTimeout,在vue中使用$nextTick就可以解决问题了)我们可以通过$nextTick() 获取到更新之后的DOM。
- 如果要在created()钩子函数中进行的DOM操作,由于created()钩子函数中还未对DOM进行任何渲染,所以无法直接操作。(这个地方存在疑问,还需要继续研究)。
- 钩子的 this 指向调用它的 Vue 实例。
附上生命周期的图示:
二、代码部分
//Q:实现input加载之后获取到焦点
Vue.component("subCom",{
data(){
return{
isShow:false
}
},
template:`
<input type="text" v-show="isShow" ref="input" v-model="content" />
`,
created(){
},
beforeMount(){
},
mounted(){
//此时修改了isShow的值 所以input显示出来了
this.isShow = true;
console.log(this.$refs.input);//获取到的是数据未更新前的DOM<input type="text" style="display: none;"> 隐藏状态
this.$nextTick(function(){
//console.log(this.$refs.input);//获取到的是数据更新后的DOM<input type="text" style=""> 显示状态
this.$refs.input.focus();//组件渲染之后input获得焦点
})
}
})
new Vue({
el:"#app",
template:`
<div>
<subCom ref="subCom"/>
</div>
`
})