Vue.js 为什么输入会重置fn1中的光标位置，而不会重置fn2中的光标位置？

为什么输入会重置fn1中的光标位置，而不会重置fn2中的光标位置？我还尝试了

：type.prop

修饰符

我还检查了

type

更改时是否未重新创建输入

<template>
  <div id="app">
    <input :type="type" ref="input">
    <button @click="f1">1</button>
    <button @click="f2">2</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function() {
    return {
      type: "password"
    };
  },
  methods: {
    f1: function() {
      this.type = this.type === "text" ? "password" : "text";
      this.$refs.input.focus();
    },
    f2: function() {
      const t = this.$refs.input.type;
      this.$refs.input.type = t === "text" ? "password" : "text";
      this.$refs.input.focus();
    }
  },
};
</script>

1.
2.
导出默认值{
名称：“应用程序”，
数据：函数（）{
返回{
键入：“密码”
};
},
方法：{
f1：函数（）{
this.type=this.type==“文本”？“密码”：“文本”；
这是.$refs.input.focus（）；
},
f2：函数（）{
const t=this.$refs.input.type；
此.$refs.input.type=t==“文本”？“密码”：“文本”；
这是.$refs.input.focus（）；
}
},
};