使用vue时autofocus失效问题解决方案

最近在用vue开发项目时，遇到一个需求，页面打开时输入焦点自动聚焦到input输入框上，但是使用下来竟然不起作用，我就很奇怪。一番搜索下来，大家都有提到这个问题，但是没有一个提到为什么出现这种现象，都是直接贴上解决方法。 合着大家对出现这种问题的原因一点也不好奇，就是搬运个解决方案啊！！！搜索到的解决方案如下：

1
2
3
4
5
6
7
8
9

    <input type="text" ref="input" name="search">
    //使用ref选中
    //在生命周期mounted中
    mounted(){
        this.$nextTick(() => {
            this.$refs.input.focus()
        })
    }

大多都是使用ref，直接操作dom。em，这个解决方式一点也不优雅啊，就是个autofocus功能，原生HTML一个autofocus属性就解决问题的东西，在一个js框架里竟然要用js来操作dom来实现？？？我用框架不就是为了方便么？我可不信vue连这点小问题解决不了？

我可不管什么原因，如果是vue导致的autofocus属性失效的话，vue应该要出一个语法糖来解决这个问题，vue内置自定义指令也好，其他方法也好，自己的锅 就是要自己解决掉。要不然这么多开发者都要多写一些丑陋的代码来实现一个HTML自带的功能，简直不可理喻。然后我找到了vue的github上的issue#8112中有提到这个问题。

大概原因可能是这样的，autofocus是页面加载后，页面被点击前自动聚焦到autofocus的元素，但是vue加载成功后，可能会有类似模拟点击 或者 dom重新渲染 之类的操作，导致页面的autofocus失效。其中也有比较优雅的解决方案，添加一个vue属性 :autofocus="'autofocus'"来解决问题，这种处理方式非常接近原生HTML的写法，轻轻松松的解决autofocus的问题。

1
2

    <input type="text" :autofocus="'autofocus'" name="search">

使用vue属性很好的解决了我的问题，但是没一会，我就遇到了新的问题：

在iframe嵌套的页面中，autofocus叒失效了！！！

上面的issue中有人提到用"v-cloak"也能解决问题，我加上了，然后他竟然能生效了。。。具体的原理不太清楚，有人说具有autofocus的隐藏元素，显示时会自动聚焦，可是经过测试并不会这样子。其实这种情况下，使用ref来操作dom来使元素获取焦点是比较合适的。这么看来，其实直接操作dom的适用范围更广一点。先说到这里，后续有发现再补充。