首页 > HTML5资源教程 > VUE的生命周期

VUE的生命周期

日期：2018-05-17

来源：程序思维浏览：3117次

vue在创建的时候会有一系列初始化的步骤
- 实例需要配置数据监测(data observe),模板编译,挂载到dom,然后在变化时更新dom
- 实例也会调用一些生命周期钩子,为我们提供了自定义逻辑的机会
- 所有的生命周期钩子自动绑定this上下文到实例中,箭头函数绑定
生命周期钩子函数
- 其实指的也就是生命周期方法,只不过是挂载到执行的各个阶段,所以叫钩子函数

2.1.2.2. 演示


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Vue入门之生命周期</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <p>{{ number }}</p>
            <input type="text" name="btnSetNumber" v-model="number">
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    number: 1
                },

                //在创建对象之前,监控数据变化和初始化事件之前调用
                beforeCreate: function() {
                    console.log('beforeCreate 钩子执行...');
                    console.log(this.number)  //数据监测还没有开始
                },
                //实例创建完成之后调用,挂载阶段还没有开始
                created: function() {
                    console.log('cteated 钩子执行...');
                    console.log(this.number)
                },
                //开始挂载的时候执行,这时html还没有渲染到页面上
                beforeMount: function() {
                    console.log('beforeMount 钩子执行...');
                    console.log(this.number)
                },
                //挂载完成,也就是模板中的heml渲染到了页面中,此时可以做一些ajax的操作,这个钩子函数只会执行一次
                mounted: function() {
                    console.log('mounted 钩子执行...');
                    console.log(this.number)
                },
                //数据更新之前调用
                beforeUpdate: function() {
                    console.log('beforeUpdate 钩子执行...');
                    console.log(this.number)
                },
                //数据更新之后调用
                updated: function() {
                    console.log('updated 钩子执行...');
                    console.log(this.number)
                },
                //数据销毁之前
                beforeDestroy: function() {
                    console.log('beforeDestroy 钩子执行...');
                    console.log(this.number)
                },
                //数据销毁之后
                destroyed: function() {
                    console.log('destroyed 钩子执行...');
                    console.log(this.number)
                },
            });

            //实现数据的更新
            //  vm.$set(dataModel, 'number', 123)

            //销毁钩子的执行
            //  vm.$destroy(true)


        </script>
    </body>

</html>

2.2. 补充

在vue2.0之后 , 也就是后续的版本中, 生命周期钩子已经发生的变化 , 在原先的基础上新增了两个生命周期钩子函数

1.activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

2.deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

精品好课

React实战视频教程仿京东移动端电商

React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。

最新完整React+VUE视频教程从入门到精，企业级实战项目

React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...

HTML5视频播放器video开发教程

适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...

jQuery视频教程从入门到精通

jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......

Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程

2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...

HTML5基础入门视频教程易学必会

HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...

VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)

VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...

最新完整React视频教程从入门到精通纯干货纯实战

React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...