Vue3生命周期函数和方法详解

生命周期函数

Vue3中的生命周期函数有如下：

beforeCreate

在实例准备被创建之前，也就是数据观测和初始化事件还没开始的时候触发。在这个阶段无法获取到 data 和 methods 中的数据。此时我们可以在此阶段中做一些初始化的操作，如全局变量的初始化。

export default {
  beforeCreate() {
    console.log('beforeCreate')
  }
}

created

在实例完成了数据观测、属性和方法的运算、初始化事件之后被触发，此时可以访问到 data 和 methods 收集了依赖的数据。

export default {
  created() {
    console.log('created')
  }
}

beforeMount

在挂载开始之前被调用：相关的 render 函数已经完成了编译，并且可以访问到真实的 DOM。在此时我们可以做一些准备工作，如：获取 DOM 元素的大小进行计算。

export default {
  beforeMount() {
    console.log('beforeMount')
  }
}

mounted

在挂载结束后被调用，此时组件已经被挂载到 DOM 中。我们可以在这个函数中对挂载好的 DOM 元素进行一些修改，比如添加样式等。

export default {
  mounted() {
    console.log('mounted')
  }
}

beforeUpdate

在数据更新时调用，但是此时组件还没有更新，我们可以在此时进行一些操作，比如获取更新前的 DOM 元素的信息。

export default {
  beforeUpdate() {
    console.log('beforeUpdate')
  }
}

updated

在组件更新完毕之后被调用。此时我们可以操作更新后的 DOM 元素。

export default {
  updated() {
    console.log('updated')
  }
}

beforeUnmount

在实例被卸载之前调用，此时实例完全可以被调用和访问。在这个函数中我们可以做一些清理工作，比如接触事件绑定，清除定时器等。

export default {
  beforeUnmount() {
    console.log('beforeUnmount')
  }
}

unmounted

在组件被卸载后调用。此时 Vue 实例中的所有资源都被释放，包括该实例绑定到的所有事件和监听器。此时实例已经无法访问，任何操作都将报错。

export default {
  unmounted() {
    console.log('unmounted')
  }
}

常用方法

watch

watch 用于监听数据变化并执行一些操作。其语法如下：

watch: {
    'data属性名'(newVal, oldVal) {
        // do something...
    }
}

示例：

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    'count': function (newVal, oldVal) {
      console.log(`count的值已经从 ${oldVal} 更新为 ${newVal}`)
    }
  }
}

computed

computed 用于实时监测该属性的变化，与 watch 不同的是，computed 属性是基于它们的依赖进行缓存的，只有在它们的依赖项改变时才会重新求值。

computed: {
    doubledCount() {
        return this.count * 2
    }
}

示例：

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubledCount() {
      return this.count * 2
    }
  }
}

以上就是 Vue3 生命周期函数和常用方法的详细介绍。

两个示例：

示例1

<template>
  <div>
    <p>count: {{ count }}</p>
    <p>doubledCount: {{ doubledCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubledCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

在上面的代码中，我们监听了 count 的值的变化。

示例2

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count 的值已经从 ${oldVal} 更新为 ${newVal}`)
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

在上面的代码中，我们使用 watch 监听了 count 变量的值的变化，并在变化时输出了新旧值。