02-Vue实例的生命周期函数

编程的一拳超人

已于 2024-06-21 10:21:33 修改

阅读量1k

点赞数 25

分类专栏： # Vue 文章标签： vue.js 前端 javascript

于 2024-05-21 15:10:08 首次发布

本文链接：https://blog.csdn.net/weixin_48053866/article/details/139093404

版权

前言

我们接着上一篇文章 01-05.Vue自定义过滤器
来讲。

下一篇文章 03-01-Vue组件的定义和注册

介绍

vue实例的生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期钩子：就是生命周期事件的别名而已。

生命周期钩子 = 生命周期函数 = 生命周期事件。

生命周期函数的主要分类

1、创建期间的生命周期函数

beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板。我们可以在这里进行Ajax请求。
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示真实DOM渲染完了，可以操作DOM了）

举例：

<template>
    <div>
    </div>
</template>

<script>
export default {
     
  	data(){
     
      return {
     
        msg: 'hello vuejs'
      }
    }
  			// 这是第1个生命周期函数，表示实例完全被创建出来之前，会执行它
        beforeCreate: function () {
     
            console.log('01 beforeCreate',