Vue3 知识点 3：Vue 的生命周期、钩子函数、计算属性和侦听器

前端

2024-02-09 10:42:38

前言

本节知识点主要是生命周期那几个函数，计算属性和侦听器。

Vue 的生命周期

Vue 的生命周期是一个组件从创建到销毁的过程。在这个过程中，组件会经历一系列状态和阶段，并且可以在每个阶段执行特定的操作。

Vue 的钩子函数

Vue 的钩子函数是生命周期中的特定时刻触发的函数。这些函数可以让你在组件的生命周期中执行特定的操作，例如在组件创建时执行初始化操作，在组件销毁时执行清理操作。

Vue 的计算属性

Vue 的计算属性是基于组件数据动态计算的属性。计算属性可以让你在组件中使用复杂的数据表达式，而无需每次都手动计算。

Vue 的侦听器

Vue 的侦听器是用于侦听组件数据的变化。当组件数据发生变化时，侦听器就会触发相应的事件处理函数。

深入浅出，融会贯通

下面我们将通过一个简单的示例来演示 Vue 的生命周期、钩子函数、计算属性和侦听器的用法。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">改变消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, world!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from "${oldValue}" to "${newValue}".`)
    }
  }
}
</script>