vue生命周期

最新推荐文章于 2025-05-09 11:19:58 发布

NanDaJ

最新推荐文章于 2025-05-09 11:19:58 发布

阅读量122

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/bo646424926/article/details/117480748

vue 专栏收录该内容

2 篇文章

订阅专栏

本文围绕Vue实例生命周期展开，介绍了创建、编译、运行、销毁各阶段的生命周期方法，如beforeCreate时实例刚创建，数据和方法未初始化；created可最早访问实例数据和方法；mounted能拿到界面渲染后内容等，还说明了各方法触发条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过这个视频学习的，讲的很清楚
视频地址

官网的生命周期图

new Vue()

创建一个vue实例,然后(Init Events & Lifecycle)初始化vue实例的事件和生命周期方法

创建阶段生命周期方法beforeCreate

在调用生命周期方法beforeCreate方法的时候，表示vue实例刚刚被创建出来，此时此刻还没有初始化Vue实例中的数据(data)和方法(methods)。所以此时此刻还不能访问Vue实例中保存的数据和方法。调用完beforeCreate的方法后，实例中的数据和方法开始初始化

var app = new Vue({
            beforeCreate() {
                console.log(this.name)
                console.log(this.say)
            },
            el:"#app",
            data() {
                return {
                    name:"ndj"
                }
            },
            methods: {
                say(){
                    console.log('hello')
                }
            },
        })

打印出来的是两个undefined

创建阶段生命周期方法created

在调用created的时候，是我们最早能够访问VUE实例中保存的数据和方法的地方

var app = new Vue({
            created() {
                console.log(this.name)
                console.log(this.say)
            },
            el:"#app",
            data() {
                return {
                    name:"ndj"
                }
            },
            methods: {
                say(){
                    console.log('hello')
                }
            },
        })

成功打印属性name和函数say(）

开始编译模板阶段

上图这一阶段开始编译模板，根据data中的数据和指令生成HTML。注意此时还没有渲染到界面，仅存在内存中

创建阶段生命周期方法beforeMount

在调用beforeMount的时候，表示Vue已经编译好了最终模板，但是还没有将最终的模板渲染到界面上
因为还没有渲染到界面上，仅在内存，所以我们测试一下

<div id="app">
        <p>{{name}}</p>
</div>
    <script>
        var app = new Vue({
            beforeMount() {
                console.log(document.querySelector('p').innerHTML)
                console.log(document.querySelector('p').innerText)
            },
            el:"#app",
            data() {
                return {
                    name:"ndj"
                }
            },
            methods: {
                say(){
                    console.log('hello')
                }
            },
        })
    </script>

此时你打印 ‘p’
打印出来的是：

{{name}}
{{name}}

创建阶段生命周期方法mounted

在调用mounted的时候，表示Vue已经编译好了最终模板，表示我们已经可以拿到界面上渲染之后的内容了

var app = new Vue({
            mounted() {
                console.log(document.querySelector('p').innerHTML)
                console.log(document.querySelector('p').innerText)
            },
            el:"#app",
            data() {
                return {
                    name:"ndj"
                }
            },
            methods: {
                say(){
                    console.log('hello')
                }
            },
        })