ref,refs,和$nextTick

ref和refs的用法：详情看

(9条消息) vue中用$ref和$refs写出像js一样的this遍历样式_m0_64207574的博客-CSDN博客_refs遍历

$nextTick

$nextTick(()=>{})监听dom是否更新后执行的回调函数方法

执行思路，由于mvvm模式的特点，视图层改变引起数据源改变，重新引起页面渲染，但是在重新渲染的过程中会发现 input处于if为false的状态，会报错，所以要使用$nextTick方法监听

这里是监听了input这个dom元素是否发生改变；发生改变后再执行$nextTick里的方法;

此方法类似于ES6中的promise；异步执行同步处理

如：

<template>
  <div>
    <input
      type="text"
      placeholder="输入要搜索的关键字"
      v-if="isShow"
      ref="inp"
    />
    <button v-else @click="searchFn">
      点击搜索,出输入框并马上处于激活状态
    </button>
  </div>
</template>

<script>
export default {
  name: "Next",
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    searchFn() {
      this.isShow = true; // 点击显示输入框, 隐藏按钮
      this.$refs.inp.focus();
      // 让输入框处于激活状态

      // 发现报错了, this.$refs.inp是个undefined(没获取到dom标签)
      // 因为数据isShow改变后, "异步"显示input, 渲染组件需要时间，并且时间没有JS执行的快；所以获取不到,而代码会继续往下走所以还没获取到input, 所以是undefined

      // 解决: 在dom更新后, 会触发$nextTick里的回调函数
      this.$nextTick(() => {
        this.$refs.inp.focus();
      });
    },
	//方法2
    // async searchFn() {
    // 	this.isShow = true
    // 	await this.$nextTick()
    // 	this.$refs.inp.focus()
    // },
 /  方法3
    // searchFn() {
	// 	this.isShow = true; 
    //   setTimeout(() => {
    //     this.$refs.inp.focus();
    //   }, 0);
    // },
  },
};
</script>