在Vue的模板部分直接给变量赋值是否可行，属于最佳实践吗？

核心结论 #

• 模板插值表达式内直接给变量赋值技术上可运行，但完全不属于Vue推荐的最佳实践
• 所有带副作用的状态修改逻辑，都必须放到script部分的方法/计算属性/侦听器中实现，模板仅负责声明式渲染逻辑

问题说明 #

Vue设计模板表达式的初衷是实现无副作用的轻量取值计算，你在插值内直接修改txt变量属于带副作用的操作，会带来两个核心问题：

1. 状态变更不可预测：组件每次重渲染都会执行该表达式，txt会被反复赋值，后续排查状态变更问题时很难定位修改来源
2. 违反渲染逻辑设计原则：模板的唯一作用是描述UI和状态的映射关系，不应该承载状态修改的逻辑

另外你当前代码还有一个不规范写法：v-for和v-if写在同一标签上，Vue中v-for优先级高于v-if，会导致每次循环都执行一次判断，产生不必要的性能开销。

正确实现方案 #

第一步：script部分封装逻辑 #

export default {
  data() {
    return {
      txt: 'show',
      cars: {
        // 你的cars原有数据
      }
    }
  },
  computed: {
    // 提前过滤出匹配的车辆，避免v-for和v-if同写
    matchedHondaCars() {
      return this.cars.honda.filter(row => row.car_id === this.cars.id)
    }
  },
  watch: {
    // 监听cars变化自动更新txt值，也可以在对应触发逻辑的方法里调用更新
    cars: {
      immediate: true,
      handler() {
        const hasMatch = this.matchedHondaCars.length > 0
        this.txt = hasMatch ? 'sizes' : 'showerror'
      }
    }
  }
}

第二步：简化模板代码 #

<!-- v-for必须绑定唯一key -->
<div v-for="row in matchedHondaCars" :key="row.car_id">
  <span v-show="txt == 'show'"></span>
  <p>{{ row.car_name }}</p>
</div>

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