纯JavaScript温度转换项目迁移Vue.js遇阻，寻求技术指导

Let's break down your questions and fix up that Vue code step by step—you're already on the right track, we just need to align with Vue's data-driven mindset instead of the DOM-manipulation approach from vanilla JS.

1. Methods vs. Watch: Which to Use? #

Here's the quick rule of thumb for your temperature converter:

• Methods: Use these to encapsulate reusable logic (like temperature conversion formulas, rounding functions). They're perfect for code you need to call explicitly (when an input changes, or when decimal places update).
• Watch: Use this only for side effects that need to run when a specific data property changes. For example, updating all temperature values when the decimal place count changes.

In your case, most of your conversion logic belongs in methods, with a single watcher for the decimal places (optional, but convenient for real-time updates).

2. @input vs. @change: Which is Better? #

• @input: Triggers immediately as the user types or modifies the input (every keystroke, paste, etc.). This is ideal for your converter—users expect real-time updates as they enter a temperature.
• @change: Triggers only when the input loses focus (user clicks away) or presses enter. This is better for forms where you don't want to run logic until the user finishes entering data.

Stick with @input for your temperature fields.

3. Fixed Vue Code (Full Working Example) #

Your original code had a few issues: you were trying to manipulate DOM elements directly (like celsiusIn.step), misusing the watch section, and not leveraging Vue's reactive data properly. Here's a corrected version that follows Vue best practices:

<template>
  <div class="temperature-converter">
    <h3>Temperature Converter</h3>
    
    <!-- Decimal Places Control -->
    <div class="decimal-setting">
      <label for="decimalTemp">Decimal Places:</label>
      <input
        id="decimalTemp"
        type="number"
        min="0"
        max="10"
        v-model.number="decimalPlaces"
        step="1"
      />
    </div>

    <!-- Temperature Inputs -->
    <div class="temperature-grid">
      <div class="temp-item">
        <input
          type="number"
          v-model.number="celsius"
          :step="inputStep"
          @input="updateFrom('celsius')"
        />
        <label>Celsius (ºC)</label>
      </div>
      <div class="temp-item">
        <input
          type="number"
          v-model.number="kelvin"
          :step="inputStep"
          min="0"
          @input="updateFrom('kelvin')"
        />
        <label>Kelvin (K)</label>
      </div>
      <div class="temp-item">
        <input
          type="number"
          v-model.number="fahrenheit"
          :step="inputStep"
          @input="updateFrom('fahrenheit')"
        />
        <label>Fahrenheit (ºF)</label>
      </div>
      <div class="temp-item">
        <input
          type="number"
          v-model.number="rankine"
          :step="inputStep"
          @input="updateFrom('rankine')"
        />
        <label>Rankine (ºRa)</label>
      </div>
      <div class="temp-item">
        <input
          type="number"
          v-model.number="romer"
          :step="inputStep"
          @input="updateFrom('romer')"
        />
        <label>Rømer (ºRø)</label>
      </div>
      <div class="temp-item">
        <input
          type="number"
          v-model.number="newton"
          :step="inputStep"
          @input="updateFrom('newton')"
        />
        <label>Newton (ºN)</label>
      </div>
      <div class="temp-item">
        <input
          type="number"
          v-model.number="delisle"
          :step="inputStep"
          @input="updateFrom('delisle')"
        />
        <label>Delisle (ºDe)</label>
      </div>
      <div class="temp-item">
        <input
          type="number"
          v-model.number="reaumur"
          :step="inputStep"
          @input="updateFrom('reaumur')"
        />
        <label>Reaumur (ºRé)</label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TemperatureConverter",
  data() {
    return {
      decimalPlaces: 0,
      // Initial values matched to 293.15 Kelvin
      kelvin: 293.15,
      celsius: 20,
      fahrenheit: 68,
      rankine: 527.67,
      romer: 12,
      newton: 6.6,
      delisle: 120,
      reaumur: 16
    };
  },
  computed: {
    // Calculate input step dynamically based on decimal places
    inputStep() {
      return 1 / (10 ** this.decimalPlaces);
    }
  },
  methods: {
    // Convert any unit to Kelvin (reusable logic)
    convertToKelvin(unit, value) {
      const conversionMap = {
        celsius: (t) => t + 273.15,
        fahrenheit: (t) => (t + 459.67) / 1.8,
        rankine: (t) => t / 1.8,
        romer: (t) => ((t - 7.5) * 40) / 21 + 273.15,
        newton: (t) => (t * 100) / 33 + 273.15,
        delisle: (t) => 373.15 - (t * 2) / 3,
        reaumur: (t) => t * 1.25 + 273.15,
        kelvin: (t) => t
      };
      // Ensure we never go below absolute zero
      return Math.max(0, conversionMap[unit](value));
    },
    // Convert Kelvin to all other units (handles rounding)
    convertFromKelvin(kelvinValue) {
      const round = (val) => Number(val.toFixed(this.decimalPlaces));
      this.celsius = round(kelvinValue - 273.15);
      this.kelvin = round(kelvinValue);
      this.fahrenheit = round(kelvinValue * 1.8 - 459.67);
      this.rankine = round(kelvinValue * 1.8);
      this.romer = round(((kelvinValue - 273.15) * 21) / 40 + 7.5);
      this.newton = round(((kelvinValue - 273.15) * 33) / 100);
      this.delisle = round(((373.15 - kelvinValue) * 3) / 2);
      this.reaumur = round((kelvinValue - 273.15) * 0.8);
    },
    // Triggered when any input changes: update all units
    updateFrom(unit) {
      const currentValue = this[unit];
      const kelvin = this.convertToKelvin(unit, currentValue);
      this.convertFromKelvin(kelvin);
    }
  },
  // Update all values when decimal places change
  watch: {
    decimalPlaces() {
      this.convertFromKelvin(this.kelvin);
    }
  }
};
</script>

<style scoped>
.temperature-converter {
  max-width: 450px;
  margin: 2rem auto;
  padding: 1.5rem;
  font-family: 'Arial', sans-serif;
  border: 1px solid #eee;
  border-radius: 8px;
}

.decimal-setting {
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.temperature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.temp-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

input {
  padding: 0.5rem;
  text-align: right;
  border: 1px solid #ddd;
  border-radius: 4px;
}

label {
  font-size: 0.9rem;
  color: #555;
}
</style>

Key Improvements Explained: #

1. Reactive Data: All temperature values and decimal places are stored in data(), so Vue automatically tracks changes.
2. No DOM Manipulation: We use :step="inputStep" (a computed property) to dynamically set input steps instead of modifying DOM elements directly.
3. Encapsulated Logic: Conversion formulas are grouped in methods for reusability—no duplicate code.
4. Simplified Updates: When any input changes, we convert that value to Kelvin first, then derive all other units from that single source of truth.
5. Decimal Place Sync: A watcher updates all temperature values immediately when the decimal place count changes.

内容的提问来源于stack exchange，提问作者Adão Gama