vue的生命周期

vue的生命周期

前言

一个vue实例从创建->挂载->更新->销毁的这整个过程,称为该实例的生命周期。用户可以在不同阶段通过生命周期钩子函数,来添加自己的代码。每个阶段有一对钩子,下面按顺序详解。

生命周期钩子

一、创建

  1. beforeCreate:此时data和methods中的数据还没有初始化

    <div id="app"></div>
    
    new Vue({
        el: '#app',
        data: {
            msg: '厕所打你'
        },
        methods: {
            print() {
                console.log('你给我等着')
            }
        },
        beforeCreate: function() {
            console.log(this.msg)//undefine
            console.log(this.print())
            //TypeError: this.print is not a function
        }
    })
    
  2. created:此时data和methods中的数据已经初始化完成,所以要调用methods中的方法,或者操作data中的数据,最早也要在created中

    <div id="app"></div>
    
    new Vue({
        el: '#app',
        data: {
            msg: '厕所打你'
        },
        methods: {
            print() {
                console.log('你给我等着')
            }
        },
        created: function() {
            console.log(this.msg)//厕所打你
            console.log(this.print())//你给我等着
        }
    })
    

二、挂载

  1. beforeMount:此时模板已经编译好了,但是还没有挂载到页面,所以用户只能看到标签里原始的内容

    <div id="app">{{msg}}</div>
    
    new Vue({
        el: '#app',
        data: {
            msg: '厕所打你'
        },
        beforeMount: function() {
          console.log(document.getElementById("app").innerHTML)
          //{{msg}}
        }
    })
    
  2. mounted:此时模板已经被挂载到页面,用户就能看到渲染好的内容了

    <div id="app">{{msg}}</div>
    
    new Vue({
        el: '#app',
        data: {
            msg: '厕所打你'
        },
        beforeMount: function() {
          console.log(document.getElementById("app").innerHTML)
          //厕所打你
        }
    })
    

三、更新

只有当vue实例中的data数据发生改变时,才会触发以下两个生命周期事件

  1. beforeUpdate:此时data数据已经改变了,但是页面内容还没有更新

    <div id="app">
    	<button @click="msg='你过来啊'">修改msg</button>
    	<h2 id="h2">{{msg}}</h2>
    </div>
    
    new Vue({
        el: '#app',
        data: {
            msg: '厕所打你'
        },
        beforeUpdate: function() {
            console.log('beforeUpdate被执行了并且msg现在被改为:'+this.msg)
            //beforeUpdate被执行了并且msg现在被改为:你过来啊
            console.log('但是此时页面的内容仍然为:'+document.getElementById("h2").innerHTML)
            //但是此时标签的内容仍然为:厕所打你
        }
    })
    
  2. updated:此时页面内容已经被更新

    <div id="app">
    	<button @click="msg='你过来啊'">修改msg</button>
    	<h2 id="h2">{{msg}}</h2>
    </div>
    
    new Vue({
        el: '#app',
        data: {
            msg: '厕所打你'
        },
        updated: function() {
            console.log('updated被执行了并且msg现在被改为:'+this.msg)
            //updated被执行了并且msg现在被改为:你过来啊
            console.log('此时页面的内容也被更新为:'+document.getElementById("h2").innerHTML)
            //此时页面的内容也被更新为:你过来啊
        }
    })
    

四、销毁

  1. beforeDestroy:此时实例的data和methods,以及指令还可以使用
  2. destroyed:此时实例已被销毁
已标记关键词 清除标记
相关推荐
<p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310007118712.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="color:#FFFF00;background-color:#FF0000;font-size:24px;"><strong>走在技术前沿之 Vue3.0 新特性全面解析。 <strong>全网抢先看,做首批 Vue 3.0 开发者!!!</strong></strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>课程内容包含:<br /> </strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>1.Vue 3.0之版本大更新</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>2.新特性重点关注</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>3.composition-api(组合式API)</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>4.初始化Vue 3.0项目</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>5.setup函数</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>6.响应式系统API(reactive、ref、computed、watch等)</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>7.响应式系统工具集(unref、toRef、toRefs、isRef、isProxy等)<br /> </strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>8.生命周期钩子函数的变化</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>9.依赖注入</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>10.模板refs</strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;">教学全程采用笔记+代码案例的形式讲解,通俗易懂!!!</span></strong> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011021534.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011101181.png" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011183568.png" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011275518.png" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <span style="color:#C00000;"><strong><span><strong>补充:想学习 Vue 2.x 的同学请移步以下地址</strong></span></strong><strong><span><strong></strong></span></strong></span> </p> <p style="font-size:16px;"> <span style="color:#C00000;"><strong><span style="color:#FF0000;"><strong><a href="https://edu.51cto.com/course/10543.html"></a><a href="https://edu.csdn.net/course/detail/7906">https://edu.csdn.net/course/detail/7906</a> (</strong></span></strong><span style="color:#FF0000;"><strong><span></span></strong><strong><span></span></strong><strong><span><strong>Vue.js 2.0之全家桶系列视频课程)</strong></span></strong></span></span> </p> <p style="font-size:16px;"> <span style="color:#FF0000;"><strong><span><strong><span style="font-size:18px;"> </span></strong></span></strong></span> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"></span></strong> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong>讲师介绍</strong></span> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310012193677.jpg" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p>
<p> <span style="font-size:24px;"><img src="https://img-bss.csdn.net/202002111502403886.png" alt="" /><br /> </span> </p> <p> <span style="font-size:24px;"><img src="https://img-bss.csdn.net/202002111502521739.jpg" alt="" /><br /> </span> </p> <p> <span style="font-size:24px;">本课程是Vue的快速入门课程,涉及到的课程知识点:Vue环境的快速搭建, 会使用Vue生命周期的钩子函数; 会使用vue常见指令;会使用vue计算属性和watch监控;会编写Vue组件;掌握组件间通信,会创建Vue实例,知道Vue的常见属性</span> </p> <br /> <br /> <span style="font-size:24px;">大家都知道涛哥最关心的是找工作,这段时间出去面试的时候会经常会被问及到Vue相关的知识,所以涛哥迫不及待的赶紧出了一版Vue相关的教程,有人问:我们做后台会前台干什么呀?是因为现在的公司老板都想招复合型的人才,招一个Java开发回来恨不得前后台都会,所以我们Java开发人员也要掌握一些前端相关的技能。Java这边现在前端用的比较多的就是VUE,所以大家还是要赶紧学习起来,为了你不被淘汰,为了你能快速适应公司的发展速度,快速找到一份满意的工作,赶紧学起来吧。本课程是Vue的快速入门课程,涉及到的课程知识点:Vue环境的快速搭建,?会使用Vue生命周期的钩子函数;?会使用vue常见指令;会使用vue计算属性和watch监控;会编写Vue组件;掌握组件间通信;</span><br /> <br /> <span style="font-size:24px;">用2小时看完,就可以快速上手公司里的项目,后期还会有实战项目上线,请大家持续关注。</span><br /> <br /> <span style="font-size:24px;"></span>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页