Vue.$nextTick()生命周期钩子

1. 作用：在模板解析后调用指定的回调函数
2. 用途：当数据改变后，想对模板解析后的新DOM做一些操作
3. 案例：文本框显示时，获取焦点

   <template>
   	<div>
   		<button @click="showInput()">点击显示文本框</button>
   		<input type="text" @blur="hiddenInput()" ref="inputNode" v-show="isShow">
   	</div>
   </template>
   <script>
   	export default {
   		data() {
   			return {
   				isShow: false
   			}
   		},
   		methods: {
   			showInput() {
   				this.isShow = true;
   				// 文本框显示时，获取焦点，此时应该等到DOM被重新解析之后，拿到文本框节点进行聚焦操作
   				// 如果直接进行聚焦操作，此时还未拿到文本框节点，会报错
   				this.$nextTick(function () {
   					this.$refs.inputNode.focus();
   				});
   			},
   			hiddenInput() {
   				this.isShow = false;
   			}
   		}
   	}
   </script>