旧Vue CDN版射箭计算器失效，报‘Vue is not a constructor’错误求助

1. 解决Vue构造函数报错问题 #

报错核心原因是当前CDN引入的Vue版本与原有代码不兼容：

• 你的代码采用Vue 2写法（通过new Vue()实例化），若CDN默认拉取了Vue 3，就会触发该错误——Vue 3已改用createApp()创建实例。
• 修复方式：明确引入Vue 2稳定版本的CDN，锁定版本避免自动升级：

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  

2. 修复输入后无计算结果的问题 #

输入数值无结果，是因为数据初始值为字符串，导致计算时触发字符串拼接而非数值运算：

• 原代码data()中所有属性初始值为空字符串''，用户输入数字后Vue仍会保留字符串类型，最终计算结果无效。

• 可选两种修复方式：

  方式一：修改data初始值为数字类型 #

  将data()内的属性初始值统一改为0：

  data() {
    return {
       IBO: 0,
       drawLength: 0,
       drawWeight: 0,
       arrowWeight: 0,
       additionalWeight: 0,
       arrowLength: 0,
       distanceFromNock: 0
    }
  },
  

  方式二：计算时强制转换为数字 #

  在每个计算属性中，将获取到的属性值转为数字类型：

  calcVelocity: function(){
      let ibo = Number(this.IBO);
      let dL = Number(this.drawLength);
      let dW = Number(this.drawWeight);
      let aW = Number(this.arrowWeight);
      let adW = Number(this.additionalWeight);
      // 后续计算逻辑保持不变
  }
  

  注意：所有涉及数值计算的属性都需要做同样的类型转换。

3. 额外优化建议 #

• 给输入框添加type="number"属性，限制用户仅能输入数字，避免非数值输入引发异常：

  <input type="number" v-model="IBO">
  

• 针对calcFoc计算属性，添加除数为0的判断，避免报错：

  calcFoc: function(){
      let aL = Number(this.arrowLength);
      let dN = Number(this.distanceFromNock);
      if (aL === 0) return 0;
      let result = ((100 * (dN-(aL/2)))/aL);
      return result > 0 ? result.toFixed(1) : 0;
  }
  

内容的提问来源于stack exchange，提问作者JoeG