想问一下大佬关于vue ref获取input值的问题？

Question

想要获取到input的value用value的长度去做判断，但是遇到了一点问题？ input是element的el-input下面上代码

<el-input placeholder="请扫入条码" v-model="barId" clearable style="width: 70%;" v-on:input ="inputFunc" ref="barNo"></el-input>

这是布局的代码，末尾加了ref

inputFunc() {
    console.log(this.$refs.barNo)
    console.log(this.$refs.barNo.value)
    const param = {
      BarCode: this.barId
    };
    api.getbarcodeinfo(param).then(response => {
      if (response.data.Success == false) {
        this.$notify({
          title: "失败",
          message: response.data.Message,
          type: "error",
          duration: 2000
        });
      } else {
        console.log(this.$refs.barNo.value)
        // this.barId = "";
      }
    });
  },

这是vue的代码 分别打印了3次input的value值，第一次console能获取到整个input包括里面的value也是有输入框中的值，第二个console的结果为一个null，第三次console却能够打印出value。觉得不太理解，vue文档今天不知道为什么打不开，所以想问一下大佬是什么原因需要怎么解决？谢谢

Answer 1

不要这样用。ref不是响应式的，之所以第3个有值是因为BarCode: this.barId触发了get进行了依赖收集。
应该改成watch。

Answer 2

可以直接获取barId的值

Answer 3

正常情况第二个console.log是可以打印出value的，应该是其他地方有错，我按照你的代码是可以输出的