$nextTick()函数

1、语法：this.$nextTick(回调函数)

2、作用：在下一次DOM更新结束后执行其指定的回调；

3、什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

案例

1、需求：点击输入反馈信息按钮后显示输入框，同时聚焦；点击提交按钮时在控制台输出数据，并且隐藏输入框；输入的数据不能为空，为空时弹出警告。

2、实现：

<template>
  <div>
      <button @click="handleEdit" >点我输入反馈信息</button>
      <button @click="handleInfo" >点我提交反馈信息</button>
      <br/>
      <input 
        type="text" 
        v-show="isEdit" 
        ref="inputTitle"
      />
  </div>
</template>

<script>
    export default {
        name:'Fankui',
        data(){
            return {
                isEdit:false,
            }
        },
        methods:{
            //点击输入框
            handleEdit(){
                this.isEdit = true,
                /*
                    因为this.isEdit变为true以后并没有立即解析模板，而是等handleEdit()执行完毕后再解析模板，
                    所以聚焦不会在解析模板前被调用，而实际上聚焦应该在解析模板后进行，所以最终在页面上并不会聚焦

                    所以要使用在$nextTick钩子内使用聚焦，因为$nextTick是在下一次DOM更新介乎后执行其指定的回调，
                    即在模板解析后调用聚焦函数，最终会在页面上聚焦。
                */
                this.$nextTick(function(){
                    this.$refs.inputTitle.focus()
                })
            },
            //离开输入框
            handleInfo(){
                this.isEdit = false
                if(!this.$refs.inputTitle.value.trim()) return alert('输入内容不能为空')
                console.log('反馈意见为：',this.$refs.inputTitle.value)
            },
        },
    }
</script>

3、效果：

• 点击后直接聚焦

• 提交反馈信息后，能在控制台输出反馈信息

• 如果反馈信息为空会提示报错