站在巨人的肩上：从 Vue 组件三大核心概念迈向组件编写进阶

2024-01-09 09:19:22

Vue.js 作为前端开发的热门框架，以其组件化的特性而著称。组件不仅可以实现代码复用，还能够大大提高开发效率。掌握好 Vue 组件的三大核心概念——props、computed 和 watch——是编写高质量组件的关键。

Props：组件间数据传递的桥梁

Props 是组件间传递数据的桥梁。它允许父组件将数据传递给子组件，从而实现组件之间的通信。父组件可以通过在组件标签中使用 :prop-name="value" 的形式来传递数据，子组件则可以通过在组件内部使用 this.propName 来访问数据。

例如，以下代码演示了父组件如何将一个名为 message 的数据传递给子组件：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

在子组件中，可以通过以下代码访问 message 数据：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

Computed：衍生数据的计算利器

Computed 属性是组件中衍生数据的计算利器。它允许组件根据其他数据计算出新的数据，而无需手动编写复杂的逻辑。Computed 属性的值是根据其依赖的数据动态计算的，因此当依赖的数据发生变化时，Computed 属性的值也会自动更新。

例如，以下代码演示了如何使用 Computed 属性计算出一个名为 fullName 的数据，该数据是 firstName 和 lastName 的组合：

<template>
  <div>
    {{ fullName }}
  </div>
</template>

<script>
export default {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  }
}
</script>

Watch：监听数据变化的忠实卫士

Watch 是组件中监听数据变化的忠实卫士。它允许组件在数据发生变化时执行特定的操作，从而实现对数据变化的响应。Watch 可以监听组件内部数据和父组件传递的数据。

例如，以下代码演示了如何使用 Watch 监听 message 数据的变化，并在数据发生变化时执行特定的操作：

<template>
  <div>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from "${oldValue}" to "${newValue}"`)
    }
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>