精华内容
下载资源
问答
  • Vue生命周期详解

    2021-03-24 20:39:42
    Vue生命周期详解

    Vue的生命周期

    Vue实例有一个完整的生命周期,也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程,我们称这是Vue的生命周期。

    在Vue官网有这样一张图

    在这里插入图片描述

    生命周期: vue实例从创建到销毁的过程。

    声明周期钩子: 就是生命周期事件的别名而已

    主要的生命周期函数分类:

    • 创建期间的生命周期函数:
      • beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好datamethods 属性
      • created:实例已经完成了模板的编译,但是还没有挂载到页面中
      • beforeMount:此时已经完成了模板的翻译,但是还有完全挂载到页面中
      • mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
    • 运行期间的生命周期函数:
      • beforeUpdate:状态更新之前执行此函数,此时 data 中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点
      • updated:实例更新完毕之后调用次函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了
    • 销毁期间的生命周期函数:
      • beforeDestroy:实例销毁之前调用,在这一步,实例仍然完全可用
        • 当执行 beforeDestroy 钩子函数的时候,Vue实例就已经从运行阶段进入到了销毁阶段;当执行 beforeDestroy 的时候,实例身上所有的 data 和所有的 methods, 以及 过滤器、指令、、 都处于可用状态,此时,还没有真正执行销毁的过程
      • destroyed:Vue 实例销毁后调用。调用后,vue 实例 指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁
    <template>
        <div id="app">
            <input type="button" value="修改msg" @click="msg='No'">
            <h3 id="h3">
                {{msg}}
        	</h3>
        </div>
    </template>
    
    
    <script>
    	// 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods: {
                show(){
                    console.log("执行了show方法")
                }
            },
            beforeCreate(){ //这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
                console.log(this.msg)
                this.show()
                // 注意:在 beforeCreate 生命周期函数执行的时候,data 和 methods 中 数据都还没有初始化
            },
            created(){  // 这是遇到的第二个生命周期函数
                console.log(this.msg)
                this.show()
                // 在 created 中, data 和 methods 都已经初始化好了
                // 如果要调用 methods 中的方法, 或者操作 data 中的数库, 最早,只能在 created 
            },
            beforeMount(){ // 这是遇到的第3个生命周期函数,表示 模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中
                console.log(document.getElementById('h3').innerText)
                // 在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
            },
            mounted(){ // 这是遇到的第4个生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面
                console.log(document.getElementById('h3').innerText)
                // 注意:mounted 是 实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其他操作的话,这个实例,就静静的躺在内存中,一动不动(组件已经脱离了创建阶段,进入到运行阶段)
                // 如果要通过某些插件操作页面上的DOM节点,最早要在 mounted 中进行
                
            },
            
            // 接下来是运行中的两个事件
            beforeUpdate(){ // 这时候,表示 我们的界面还没有被更新(数据更新了)
                console.log('界面上元素的内容:' + document.getElementById('h3').innerText)  // ok
                console.log('data 中的 msg 数据是:' + this.msg) // No 
                // 得出结论: 当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和最新的数据保持同步
            }
        })
    </script>
    

    最后可以得到这样一张图
    在这里插入图片描述

    展开全文
  • vue生命周期详解

    千次阅读 2017-07-19 18:09:40
    vue生命周期详解



    肯定很多人看完这张图就懵逼了,什么意思啊?????????????????

    我也不是很明白。所以看下面这张图。


    生命周期,你可以理解为它的几个阶段,每个阶段都有相对应的钩子函数,每个函数的具体作用图上已经描述的很清楚了,如果还不懂,那就全部打印出来看一遍。

    下面是扣过来的代码,直接复制出去执行以下。

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
         <p>{{ message }}</p>
    </div>
    
    <script type="text/javascript">
        
      var app = new Vue({
          el: '#app',
          data: {
              message : "xuxiao is boy" 
          },
           beforeCreate: function () {
                    console.group('beforeCreate 创建前状态===============》');
                   console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
                   console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
                   console.log("%c%s", "color:red","message: " + this.message)  
            },
            created: function () {
                console.group('created 创建完毕状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el); //undefined
                   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
                   console.log("%c%s", "color:red","message: " + this.message); //已被初始化
            },
            beforeMount: function () {
                console.group('beforeMount 挂载前状态===============》');
                console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
                console.log(this.$el);
                   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
                   console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
            },
            mounted: function () {
                console.group('mounted 挂载结束状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
                console.log(this.$el);    
                   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
                   console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
            },
            beforeUpdate: function () {
                console.group('beforeUpdate 更新前状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);   
                   console.log("%c%s", "color:red","data   : " + this.$data); 
                   console.log("%c%s", "color:red","message: " + this.message); 
            },
            updated: function () {
                console.group('updated 更新完成状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el); 
                   console.log("%c%s", "color:red","data   : " + this.$data); 
                   console.log("%c%s", "color:red","message: " + this.message); 
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);    
                   console.log("%c%s", "color:red","data   : " + this.$data); 
                   console.log("%c%s", "color:red","message: " + this.message); 
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);  
                   console.log("%c%s", "color:red","data   : " + this.$data); 
                   console.log("%c%s", "color:red","message: " + this.message)
            }
        })
    </script>
    </body>
    </html>

    总结:

    上面两张图和一堆代码,但是具体还是没讲有什么用处


    beforecreate : 举个例子:可以在这加个loading事件 
    created :在这结束loading,还做一些初始化,实现函数自执行 
    mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
    beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容


    最后 配上大牛地址:https://segmentfault.com/a/1190000008010666       

    感谢大牛的文章帮我解惑。



    展开全文
  • vue 生命周期详解

    2020-02-24 09:42:14
    vue 生命周期详解 详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue...

    vue 生命周期详解


    详解Vue Lifecycle
    先来看看vue官网对vue生命周期的介绍
    image
    Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
    每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。

    1.实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作

    2.挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

    3.接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

    4.接下来开始render,渲染出真实dom,然后执行mounted钩子函数,此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom等事情…

    5.当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,一般不做什么事儿

    6.当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom

    7.当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等

    8.组件的数据绑定、监听…去掉后只剩下dom空壳,这个时候,执行destroyed,在这里做善后工作也可以

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <aaa></aaa>
        </div>
    
        
        <template id="aaa">
            <div>
                <p class="myp">A组件</p>
                <button @click="destroy">destroy</button>
                <input type="text" v-model="msg">
                <p>msg:{{msg}}</p>
            </div>
        </template>
    
    
    
    </body>
    <script src="./vue.js"></script>
    
    <script>
        //生命周期:初始化阶段 运行中阶段 销毁阶段
        Vue.component("aaa",{
            template:"#aaa",
            data:function(){
                return {msg:'hello'}
            },
            timer:null,
            methods:{
                destroy:function(){
                    this.$destroy()//
                }
            },
            beforeCreate:function(){
                console.log('beforeCreate:刚刚new Vue()之后,这个时候,数据还没有挂载呢,只是一个空壳')           
                console.log(this.msg)//undefined
                console.log(document.getElementsByClassName("myp")[0])//undefined
            },
            created:function(){
                console.log('created:这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数')
                this.msg+='!!!'
                console.log('在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取')
                console.log('接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染')
            },
            beforeMount:function(){
                console.log('beforeMount:虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated')
                this.msg+='@@@@'
                console.log('在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取')
                console.log(document.getElementsByClassName("myp")[0])//undefined
                console.log('接下来开始render,渲染出真实dom')
            },
            // render:function(createElement){
            //     console.log('render')
            //     return createElement('div','hahaha')
            // },
            mounted:function(){ 
                console.log('mounted:此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了')
                console.log(document.getElementsByClassName("myp")[0])
                console.log('可以在这里操作真实dom等事情...')
    
            //    this.$options.timer = setInterval(function () {
            //        console.log('setInterval')
            //         this.msg+='!'  
            //    }.bind(this),500)
            },
            beforeUpdate:function(){
                //这里不能更改数据,否则会陷入死循环
                console.log('beforeUpdate:重新渲染之前触发')
                console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         
            },
            updated:function(){
                //这里不能更改数据,否则会陷入死循环
                console.log('updated:数据已经更改完成,dom也重新render完成')
            },
            beforeDestroy:function(){
                console.log('beforeDestory:销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
                // clearInterval(this.$options.timer)
            },
            destroyed:function(){
                console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳,这里也可以善后')
            }
        })
    
    
        
        new Vue({
        }).$mount('#app')
    
    
    </script>
    </html>
    
    展开全文
  • VUE生命周期详解

    2021-02-22 09:43:04
    VUE生命周期 提示:学会VUE生命周期,就能够得心应手的控制你的页面!简直不要太棒了!! 文章目录VUE生命周期前言一、VUE生命周期是什么?二、生命周期钩子函是什么?三、生命周期历程1、创建阶段2、运行阶段3、...

    VUE生命周期

    提示:学会VUE生命周期,就能够得心应手的控制你的页面!简直不要太棒了!!


    前言

    本章节主要讲述VUE生命周期的整个历程,这很重要,只有了解了整个生命周期,在写代码的时候才会清楚的知道什么时候该触发什么事件,逻辑才会更加的清晰

    一、VUE生命周期是什么?

    vue实例创建到销毁的整个过程就是vue的生命周期。vue的所有功能的实现都是围绕它的整个生命周期进行的,在生命周期内的不同阶段调用对应的钩子函数,进而实现组件数据管理和DOM渲染两大重要功能

    二、生命周期钩子函是什么?

    生命周期函数钩子如下:

    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeDestroy
    • destroyed
    这些生命周期钩子函数,会在下面的生命周期历程中详细说明它的使用场景

    三、生命周期历程

    • 从vue实例创建开始生命周期就诞生了,从创建到消亡整个生命周期历程中,它会依次经历以下几件人生大事:
    1. 实例对象创建
    2. 实例初始化
    3. 模板编译
    4. 虚拟DOM挂载
    5. 监听数据改变
    6. 销毁
    • 生命周期走到每个阶段的每个节点时,会对应的调用执行生命周期的钩子函数,调用执行完毕后,继续进行下一个生命阶段,直至最终销毁,整个生命周期也就结束了

    • 生命周期历程总的大致分为三个阶段:创建阶段、运行阶段、销毁阶段。下面对各阶段进行详细说明
      (下面的说明,从头到脚依次仔细读,我相信vue的生命周期就能够很好的理解了!!)

    1、创建阶段

    当我们new一个vue实例对象时,就立马进入了创建阶段,之后会立即初步初始化该实例对象(注意此次初始化完成后,该实例对象仅仅只是拥有了一些默认的生命周期钩子函数和默认的事件,data和methods都还没有被初始化) 代码如下(示例):
    <!-- DOM -->
    <div id="app">
        <h2 id="h2">{{msg}}</h2>
        <button @click="msg='no'">修改data</button>
    </div>
    
    //vue实例对象
    var vm = new Vue({
    	el: 'app',
    	data () {
    		return {
    			msg: 'ok'
    		}
    	},
    	methods: {
    		show () {
    			console.log('执行了show方法')
    		}
    	},
    	beforeCreate() {},
    	Created() {},
    	beforeMount() {},
    	monuted() {},
    	beforeUpdate() {},
    	update() {},
    	beforeDestory() {},
    	destroyed() {}
    })
    
    在此节点,完成vue实例对象初步初始化后,会进入到生命周期的第一个钩子函数beforeCreate,此时可以在这个函数钩子里面实现自己的一些合理的代码逻辑处理 代码如下(示例):
    beforeCreate () {
        // 这是我们遇到的一个生命周期函数,表示实例完全被创建出来之前,会执行此函数钩子
        console.log(this.msg) // 控制台输出:undefine        !!!!!并不会输出ok
        this.show() // 控制台会报错,this.show is not a function
        // 注意!!!在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有被初始化!!!
    }
    
    执行完成钩子函数beforeCreate,会去初始化数据和方法(即初始化data和methods),data和methods全部初始化完成过后,执行下一个生命周期函数created 代码如下(示例):
    created () {
        // 这是我们遇到的第二个生命周期函数,此时data和methods都已经被初始化好了!!!
        console.log(this.msg) // 控制台输出:ok
        this.show() // 控制台输出:执行了show方法
        // 注意!!!!!:如果要调用methods中的方法,或者操作data中的数据
        // 这是最早能拿到实例里面的数据和方法的一个钩子函数
      }
    
    执行完成钩子函数created后,下一步就是进行模板的编译了,判断有无el、template属性,进而执行对应的vue代码指令,形成模板字符串,之后将模板字符串渲染为内存中的虚拟DOM树,保留在内存中,下一步则是去执行下一个生命周期钩子函数beforeMount(注意:此节点只是完成了在内存中渲染虚拟DOM树,并未真正的把模板挂载到页面中) 代码如下(示例):
    beforeMount () {
        //这是我们遇到的第三个生命周期函数,表示模板在内存中已经编辑完成了,但是尚未把模板挂载渲染到页面中
        console.log(document.getElementById('h2').innerText) // 控制台输出:{{msg}}
        // (innerText为DOM中标签为<h2 id="h2">{{msg}}</h2>的内容{{msg}})
        // beforeMount执行的时候,DOM元素没有被真正替换,输出还是之前的模板字符串{{msg}},不是msg初值ok
    }
    
    执行完成钩子函数beforeMount后,接下来就是将内存中编译好的虚拟DOM挂载渲染到真实页面上去,挂载完成后,会执行下一个钩子函数mounted 代码如下(示例):
    mounted () {
        // 这是遇到的第四个生命周期函数
        // 此时内存中的模板已经真实的挂载到了页面中,用户已经能够看到渲染好的页面了
        // 所以要通过某些插件操作页面上的DOM节点,最早就在这里执行
        console.log(document.getElementById('h2').innerText) // 控制台输出:ok
        // 注意!!!!!!:mounted是实例创建期间的最后一个生命周期函数
        // 执行完了mounted函数,标志vue实例创建完毕,组件脱离创建阶段,接下来就进入运行阶段
    }
    
    执行完成钩子函数mounted后,则标志着vue实例对象创建阶段完毕了

    2、运行阶段

    当我们页面有数据修改时,则会立即进入运行阶段,此阶段一共有两个生命周期函数beforeUpdate和updated,这两个函数会根据data数据的改变,有选择性的触发0次到多次 现在我们假设点击了DOM中的button按钮,将数据msg修改为了no,这时则处于生命周期的运行阶段了,data中的msg已经完成了从ok变为no的修改(此时数据是最新的,但是真实页面不是最新的,它并未更新),之后会进入下一个生命周期函数beforeUpdate 代码如下(示例):
    beforeUpdate () {
        // 这是我们遇到的第五个生命周期函数
        // 此时界面还没有被刷新【但是数据肯定被更新了】
        console.log('界面上的元素内容:' + document.getElementById('h2').innerText) // 控制台输出:ok
        console.log('data中的msg数据:' + this.msg) // 控制台输出:no
        // 结论:执行beforeUpdate,此时页面中显示的数据未与新data保持同步,页面未刷新
    }
    
    beforeCreate执行完成过后,会根据data中的最新数据,首先会在内存中更新虚拟DOM树,当最新的虚拟DOM树被更新完成后,则重新将内存中已经更新好的虚拟DOM树渲染到真实页面中去,真实页面重新渲染完毕后立即进入下一个生命周期函数updated,此时页面和data保持同步,都是最新的 代码如下(示例):
    updated () {
        // 这是我们遇到的第六个生命周期函数
        // 在执行updated函数时,页面和data已经保持同步了,都是最新的
    }
    
    updated钩子函数执行完毕后,运行阶段结束(再次提醒:运行阶段中的两个函数会根据data数据的改变,有选择性的触发0次到多次)

    3、销毁阶段

    当页面关闭或者离开组件时,会进入到销毁阶段,这个阶段一共有beforeDestroy和destroyed两个生命周期函数 假设现在关闭了页面或者离开了某组件,则会立即进入下一个函数钩子beforeDestroy,执行此函数时,实例上的所有data、methods、filters(过滤器)、指令等等,都是处于可用状态的 代码如下(示例):
    beforeDestroy () {}
    
    beforeDestroy执行完毕后,继续执行下一个钩子函数destroyed,此时组件已经被完全销毁了,所有的data、methods、过滤器、指令都不可用
    destroyed () {}
    
    当destroyed函数执行完毕后,就标志着销毁阶段结束,至此整个vue生命周期也就结束啦

    总结

    相信仔细看了这篇文章,对vue生命周期的理解不在话下
    展开全文
  • vue 生命周期 详解

    千次阅读 2019-09-27 00:27:00
    先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 827
精华内容 330
关键字:

vue生命周期详解

vue 订阅