精华内容
下载资源
问答
  • 从而可以理解vue生命周期就是指vue实例从创建到销毁的过程 使用vue时, 用到所有功能都是围绕vue生命周期实现的,在生命周期的不同阶段调用对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能 那么vue 生命...

    我们知道 vue 是通过构建数据驱动的web界面的渐进式框架
    所谓周期就是指从一个起点到一个终点的过程,那么生命周期就是指从生命开始到生命结束的过程
    从而可以理解vue生命周期就是指vue实例从创建到销毁的过程
    使用vue时, 用到所有功能都是围绕vue生命周期实现的,在生命周期的不同阶段调用对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能

    那么vue 生命周期有哪些阶段呢

    一、创建

    1、beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el)
    使用场景:因为此时data和methods都拿不到,所以通常在实例以外使用
    2、created:实例已经创建,仍然不能获取DOM节点(有data,没有el)
    使用场景:模板渲染成html前调用,此时可以获取data和methods,so 可以初始化某些属性值,然后再渲染成视图,异步操作可以放在这里

    二、载入

    1、beforeMount:是个过渡阶段,此时依然获取不到具体的DOM节点,但是vue挂载的根节点已经创建(有data,有el)
    2、mounted:数据和DOM都已经被渲染出来了
    使用场景:模板渲染成html后调用,通常是初始化页面完成后再对数据和DOM做一些操作,需要操作DOM的方法可以放在这里

    三、更新

    1、beforeUpdate:检测到数据更新时,但在DOM更新前执行
    2、updated:更新结束后执行
    使用场景:需要对数据更新做统一处理的;如果需要区分不同的数据更新操作可以使用$nextTick

    四、销毁

    1、beforeDestroy:当要销毁vue实例时,在销毁前执行
    2、destroyed:销毁vue实例时执行

    第一次页面加载会触发哪些钩子

    beforeCreate、created、beforeMount、mounted

     

    展开全文
  • 它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

    它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

    展开全文
  • 1.什么是vue生命周期?有什么作用? 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 ...

    1.什么是vue生命周期?有什么作用?

    每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添加自己的代码的机会。(ps:生命周期钩子就是生命周期函数)例如,如果要通过某些插件操作DOM节点,如想在页面渲染完后弹出广告窗, 那我们最早可在mounted 中进行

    2.vue生命周期的8个阶段?

    beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
    create:data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作
    beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的
    mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行
    beforeUpdate: 当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步
    updated:页面显示的数据和data中的数据已经保持同步了,都是最新的
    beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁
    destroyed: 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。

    3.第一次加载页面会触发哪些钩子?

    beforeCreate, created, beforeMount, mounted

    展开全文
  • 生命周期函数简介

    生命周期函数简介

    Vue官方文档在第一章就提到了生命周期,但对于初学者来说可能看上会一头雾水。这里的生命周期指的是Vue实例(或者Vue组件),在页面中创建-运行-销毁的三个阶段。要想完全看懂生命周期是如果运行的需要对Vue实例有一定了解,至少知道Vue实例中的datamethods是干什么的。如果你还对此一无所知可以看一下我另一篇Vue入门博客(看到属性绑定即可)。
    生命周期函数总共有八个,其中:

    1. 创建期间函数有: beforeCreatecreatedbeforeMountmounted
    2. 运行期间的函数有: beforeUpdateupdated
    3. 销毁期间的函数有: beforeDestroydestroyed

    官方文档中有一张图比较详细的介绍了每个部分执行的函数,下方为官方文档图片的汉化版
    在这里插入图片描述
    从上图我们能明显看出,整个生命周期指的是在new Vue()创建之后到new Vue()被销毁的整个过程。因为new Vue()已经被创建,所以我们什么周期函数就可以在其中作为方法使用。

    创建期间

    beforeCreate

    beforeCreate直译为创造之前,这里创建之前指的是Vue被实例化(new Vue()已经被创建),但datamethods都还没用创建的时候。

    created

    此时datamethods已经被创建,可以使用了。模板还没有被编译。

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>dome25</title>
    </head>
    
    <body>
        <div id ="app">
            <p id='vueData'>{{vdata}}</p>
            <button @click="event">methods</button>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                vdata: ['vue的data属性已经被创建']
            },
            methods: {
                event(){
                    this.vdata.push("vue的methods属性也已经被创建")
                }
            },
            // 使用beforeCreate
            beforeCreate(){
                console.log("===========(当前为beforeCreate)")
                console.log(this.vdata)
                console.log(this.event)
                console.log("===========(当前为beforeCreate)")
            },
            // 使用created
            created(){
                console.log("===========(当前为created)")
                console.log(this.vdata)
                console.log(this.event)
                console.log("===========(当前为created)")
            }
        });
    </script>
    </html>
    

    在这里插入图片描述

    beforeMount

    created的下一阶段,此时模板已经被编译了,但没有挂载到页面中。

    mounted

    此时模板代码已经被加载到页面中了,此时创建的所以事情都已经准备好了,网页开始运行了。

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>dome25</title>
    </head>
    
    <body>
        <div id ="app">
            <p id='vueData'>{{vdata}}</p>
            <button @click="event">methods</button>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                vdata: ['vue的data属性已经被创建']
            },
            methods: {
                event(){
                    this.vdata.push("vue的methods属性也已经被创建")
                }
            },
            // 使用beforeMount
            beforeMount(){
                console.log("===========(当前为beforeMount)")
                console.log(document.getElementById('vueData'))
                console.log("===========(当前为beforeMount)")
            },
            // 使用mounted
            mounted(){
                console.log("===========(当前为mounted)")
                console.log(document.getElementById('vueData'))
                console.log("===========(当前为mounted)")
            },
        });
    </script>
    </html>
    

    在这里插入图片描述

    运行期间

    beforeUpdate

    在网页运行期间,data中的数据如果更新了就会触发此方法。在这个阶段data中的数据已经进行了更新,但并没有在模板中进行更新,所以页面还没有发生变化

    updated

    这个阶段数据不仅在data中更新了,也在页面中更新完成了。算是更新完成的状态。

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>dome26</title>
    </head>
    
    <body>
        <div id ="app">
            <p id='vueData'>{{vdata}}</p>
            <button @click="event">methods</button>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                vdata: ['vue的data属性已经被创建']
            },
            methods: {
                event(){
                    this.vdata.push("vue的methods属性也已经被创建")
                }
            },
            // 使用beforeUpdate
            beforeUpdate(){
                console.log("===========(当前为beforeUpdate)")
                console.log('从页面中获取的vdata信息: '+document.getElementById('vueData').innerText)
                console.log('从实例中获取的vdata信息: '+this.vdata)
                console.log("===========(当前为beforeUpdate)")
            },
            updated(){
                console.log("===========(当前为updated)")
                console.log('从页面中获取的vdata信息: '+document.getElementById('vueData').innerText)
                console.log('从实例中获取的vdata信息: '+this.vdata)
                console.log("===========(当前为updated)")
            }
        });
    </script>
    </html>
    

    在这里插入图片描述

    销毁期间

    beforeDestroy

    Vue实例在这个阶段是已经收到了销毁指令,但指令却还没有执行的时候。这时候Vue中所有的属性都是可以使用的。注意:这里的销毁指的是解绑了事件的监听还有watcher对象数据与view的绑定,而不是页面。如果你想做在关闭窗口的时候弹出的一个提示框使用生命周期函数是无法实现的!

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>dome27</title>
    </head>
    
    <body>
        <div id ="app">
            <button @click="texts">测试</button>
            <des v-if="vitem"></des>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    <script>
        Vue.component('des', {
            template: '<p id="uid">这里是模板</p>',
    
            data(){
                return{
                    value: '默认值'
                }
            },
            methods: {
                change(){
                    this.value = '我被改变了'
                }
            },
    
            beforeDestroy(){
                console.log('=======')
                console.log(this.value)
                console.log(this.change)
                console.log(document.getElementById('uid'))
                console.log('=======')
            }
        })
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                vitem: true
            },
            methods: {
                texts(){
                    this.vitem = this.vitem ? false : true
                }
            }
        });
    </script>
    </html>
    

    在这里插入图片描述

    destroyed

    Vue实例已经被完全销毁后执行,次数Vue实例上所以东西都会解绑,所以时间都会被移除,所有子元素都会销毁。

    销毁期间的函数使用较少,功能性较少,如果你想实现类似csdn写博客未保存关闭页面时弹出的提示可以了解一下Vue-Router的导航守卫。这位博主就详细写了如果用导航守卫来实现关闭提示未保存的弹窗。

    展开全文
  • vue生命周期

    万次阅读 多人点赞 2020-09-28 09:18:11
    随着对 vue 的不断了解,会越来越发现它生命周期的重要性,只有了解了它的生命周期,才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件,即很好的控制页面。 一、什么vue 生命周期 Vue 实例从...
  • vue生命周期钩子,vue生命周期钩子,vue生命周期钩子

    千次阅读 多人点赞 2018-07-14 14:53:35
    vue生命周期11个钩子函数是按照以下的顺序来的 :(不可逆转哦,第11个除外) 一. 组件创建前后 1.beforeCreate 2.created 如,写一个子组件,然后挂在到父组件,在子组件中,console.log 子组件中的 data...
  • vue生命周期什么

    千次阅读 多人点赞 2019-03-25 23:29:25
    我们知道vue是一个构建数据驱动的web界面的渐进式框架,那么vue生命周期什么呢? vue的生命周期是什么vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在...
  • 1.什么是vue生命周期?有什么作用

    万次阅读 2019-02-23 20:54:27
    1.什么是vue生命周期?有什么作用? 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 ...
  • Vue生命周期

    千次阅读 多人点赞 2019-06-06 15:36:07
    什么是 Vue 生命周期? Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载 DOM ->...Vue生命周期作用是方便我们通过它的生命周期,在业务代码中更好地操...
  • Vue 生命周期有哪些?作用是什么

    千次阅读 多人点赞 2020-04-01 10:40:14
    什么vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程,这是 Vue生命周期 vue生命周期里边有八个生命周期钩子函数分别是 beforeCreat() 创建前 ...
  • Vue 生命周期

    2021-01-08 13:02:43
    什么是vue的生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程,这是 Vue 的...vue生命周期在项目中执行的顺序 1.beforeCeate() beforeCeate(){ console.log(this.
  • Vue生命周期.xmind

    2021-01-29 12:55:53
    Vue生命周期.xmind
  • 使用vue框架,需要在合适的时机做合适的事情,了解了vue对象的生命周期和钩子函数,才能知道,哪些事情应该咋哪个函数里做。 一、vue生命周期的理解 生命周期 用人举例说明: 生命周期就是一个人的一生,此处...
  • Vue生命周期详解

    千次阅读 多人点赞 2020-06-25 11:19:34
    目录 前言: 一、生命周期流程图详解 1.beforeCreate、Created ...1、什么vue生命周期? Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新
  • Vue生命周期总共分为8个阶段: 创建前后、挂载前后、更新前后、销毁前后 Vue生命周期第一个阶段: 创建前:获取不到数据,也拿不到DOM元素; 创建后:可以获取数据,但拿不到DOM元素。 Vue生命周期第二个阶段: 加载...
  • 浅析Vue 生命周期

    2020-08-27 08:16:12
    主要介绍了Vue 生命周期的过程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue生命周期图片

    2018-09-20 15:09:49
    这个图片主要介绍的是vue生命周期的整个过程,从创建到销毁的8个阶段
  • Vue生命周期什么

    千次阅读 2020-07-21 20:28:02
    vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。 先放一张官方文档的图 在这个...
  • 本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 55,699
精华内容 22,279
关键字:

vue的生命周期作用是什么

vue 订阅