Vue 开发踩坑记录

前言

最近，我加入了一家新公司，负责维护一个使用 Vue.js 开发的前端项目。在接手项目之初，我对代码库进行了详细的审查，发现其中存在一些不规范的代码和设计模式，这些问题不仅影响了代码的可读性和可维护性，也带来了潜在的性能和安全隐患。

基于此，我决定总结一下自己在新工作中遇到的问题，并分享一些最佳实践和建议，帮助其他 Vue.js 开发者避免在自己的项目中遇到同样的问题。

问题清单

1. 将静态属性传递给 data

在 Vue.js 中，data 对象用于存储组件的状态，这些状态可以是响应式的，也可以是静态的。然而，在某些情况下，一些开发者可能会将静态属性传递给 data，这是一种不推荐的做法。

例如：

export default {
  data() {
    return {
      // 静态属性
      message: 'Hello, world!',
    }
  },
}

这样做的后果是，Vue 将把 message 属性声明为响应式属性，即使它是一个静态值。这不仅会增加内存消耗，而且还会影响性能，因为 Vue 需要在每次组件更新时重新计算响应式属性的值。

2. 在 computed 中使用 data

computed 属性是 Vue.js 中的一种特殊属性，它允许我们基于其他属性计算出一个新的属性。在某些情况下，一些开发者可能会在 computed 中使用 data 属性，这是一种不推荐的做法。

例如：

export default {
  data() {
    return {
      message: 'Hello, world!',
    }
  },
  computed: {
    // 在 computed 中使用 data 属性
    reversedMessage() {
      return this.message.split('').reverse().join('')
    },
  },
}

这样做的后果是，每次 message 属性更新时，reversedMessage 属性也会重新计算，即使它的值没有发生变化。这不仅会影响性能，而且还会使代码难以理解和维护。

3. 在 methods 中使用 this

methods 对象包含了组件的方法，这些方法可以在组件的模板中被调用。在某些情况下，一些开发者可能会在 methods 中使用 this 来访问组件的实例，这是一种不推荐的做法。

例如：

export default {
  methods: {
    // 在 methods 中使用 this
    showMessage() {
      console.log(this.message)
    },
  },
}

这样做的后果是，当我们在组件的模板中调用 showMessage 方法时，Vue 会自动将组件的实例作为第一个参数传递给该方法。这不仅会使代码难以理解和维护，而且还会带来潜在的安全隐患，因为我们可以通过 this 关键字访问组件的内部状态。

4. 在模板中使用 v-if 和 v-for

v-if 和 v-for 是 Vue.js 中的两个常用指令，它们分别用于控制元素的显示和隐藏，以及遍历数组或对象。在某些情况下，一些开发者可能会在模板中同时使用 v-if 和 v-for，这是一种不推荐的做法。

例如：

<template>
  <ul>
    <li v-for="item in items" v-if="item.visible">
      {{ item.name }}
    </li>
  </ul>
</template>

这样做的后果是，Vue 会先执行 v-for 指令，然后执行 v-if 指令。这意味着，即使 item.visible 为 false，Vue 也会先创建 <li> 元素，然后将其隐藏。这不仅会影响性能，而且还会使代码难以理解和维护。

解决方案和建议

1. 使用常量和函数

为了避免将静态属性传递给 data，我们可以使用常量和函数来代替。例如，我们可以将 message 属性声明为一个常量，然后在 computed 中使用该常量来计算 reversedMessage 属性。

export default {
  // 使用常量
  message: 'Hello, world!',
  computed: {
    // 在 computed 中使用常量
    reversedMessage() {
      return this.message.split('').reverse().join('')
    },
  },
}

这样做的优点是，reversedMessage 属性只有在 message 属性更新时才会重新计算，这可以提高性能并简化代码。

2. 使用箭头函数

为了避免在 methods 中使用 this，我们可以使用箭头函数来代替。例如，我们可以将 showMessage 方法声明为一个箭头函数，然后在组件的模板中调用该方法。

export default {
  methods: {
    // 使用箭头函数
    showMessage: () => {
      console.log(this.message)
    },
  },
}

这样做的优点是，箭头函数不会自动将组件的实例作为第一个参数传递给该方法，这可以使代码更易于理解和维护，并避免潜在的安全隐患。

3. 使用 v-show 代替 v-if

为了避免在模板中同时使用 v-if 和 v-for，我们可以使用 v-show 指令来代替 v-if。例如，我们可以将 <li> 元素的 v-if 指令替换为 v-show 指令。

<template>
  <ul>
    <li v-for="item in items" v-show="item.visible">
      {{ item.name }}
    </li>
  </ul>
</template>

这样做的优点是，Vue 会先执行 v-for 指令，然后执行 v-show 指令。这意味着，如果 item.visible 为 false，Vue 将不会创建 <li> 元素，这可以提高性能并简化代码。