用VUE中的ref来操作DOM

在最开始的时候，我就没弄明白，这ref是干啥的

我翻开我的笔记，发现里面写着：$refs在组件渲染完成后生效，在mouted()中写
嗯，我还是不懂呢。

在听课的时候我大概就是这种状态：

曾经经历了无数次在百度上搜索：ref是干啥的。
不巧啊，我看不懂啊...
看来我必须好好写一篇文章来告诫自己这个玩意一定要搞明白了！
以下正题：
在原生js中我们要操作DOM，就需要利用各种事件。
比如原生if VUE中就有v-if
原生for VUE中有v-for
原生onclick VUE中有v-on:click
input框，我们默认让它获取焦点，就是用input.focus()，但是VUE中没有对应操作v-指令，所以这时候需要用到了ref

看代码说话：
template标签中

 <input type="text" ref="txt">

在mouted方法中

 mounted() {
                console.log("mounted被触发----");
                console.log(this.$refs); 
                console.log(this.$refs.txt)
            }

控制台输出

比如我想让这个input框自动获取焦点，那就直接在mounted中写
this.$refs.txt.forcus()

为啥要写在mounted中??
因为我要调用js中的方法要使用DOM元素，有DOM元素之后才可以。

写完才发现贼简单有没有....
T T