Vue生命周期学习

转自https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html

Vue实例虽然没有完全遵循MVVM模型,但Vue的设计无疑受到了它的启发。

  • View:是看得到的,即视图,用到Vue的项目中来,它应该是“模板”。也就是用来挂载Vue实例的一个DOM元素,通常在项目根目录中index.html文件中出现,比如<div id="app"></div>
  • Model:即模型(或数据),跟MVC中的Model一样,就是想要显示到模型上的数据,也是我们需要在程序生命周期中可能需要更新数据
  • ViewModel:Vue实例将View和Model连接起来的桥梁
  • Vue代码中el:‘#app‘牵着Viewdata: {}牵着Model,而类似methods充当一个控制者(Controller)的角色,可以修改Model的值。
  • Vue实例属性和方法有很多:

注,上图来自于@老马自嘲的《Vue入门系列之Vue实例详解与生命周期》一文。

Vue提供的可以注册的钩子都在上图中红色框标注。他们是:

  • beforeCreate:在实例初始化之后,数据观测(Data Observer)和event/watcher事件配置之前被调用
  • create:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据(Data Observer)、属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见
  • beforeMount:在挂载开始之前被调用:相关的render函数首次被调用
  • mountedel被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内
  • beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程
  • updated:由于数据更改导致虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用
  • destroyed:Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用
  • 来看一个生命周期的简单示例:
    let app = new Vue({
        el: ‘#app‘,
        data() {
            return {
                name: ‘大漠‘
            }
        },
        beforeCreate: function () {
            console.log(‘===== 创建前 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        created: function () {
            // 在实例创建之后同步调用
            // 此时实例已结束解析选项
            // 这意味着已建立:数据绑定,计算属性,方法,watcher/事件回调
            // 但是还没有开始DOM编译,$el还不存在,但是实例存在,即this.name存在,可以打印出来
            console.log(‘===== 已创建 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        beforeCompile: function () {
            console.log(‘===== 未开始编译 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        compiled: function () {
            // 在编译结束之后调用
            // 此时所有的指令已生效,因而数据的变化将触发DOM更新
            // 但是不担保$el已插入文档
            console.log(‘===== 编译完成 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        beforeMount: function () {
            console.log(‘===== Mount之前 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        mounted: function () {
            console.log(‘===== Mount完成 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        beforeUpdate: function () {
            console.log(‘===== 更新前 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        updated: function () {
            console.log(‘===== 更新完成 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        ready: function () {
            // 在编译结束和$el 第一次插入文档之后调用,如果在第一次attached钩子之后调用
            // 注意,必须是由Vue插入,比如 vm.$appendTo()等方法或指令更新,才会触发ready 钩子
            console.log(‘===== 一切都准备好了 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        attached: function () {
            // app.$appendTo(‘#app2‘)暂时触发不了,不知道怎么解决
            // 在 vm.$el插入DOM时调用。必须是由指令或实例方法,比如$appendTo()插入,直接操作vm.$el不会触发这个钩子
            console.log(‘===== 插入DOM成功 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        detached: function () {
            // 触发事件 app.$destroy(true),其中参数true控制是否删除DOM节点或者app.$remove()
            // 在vm.$el 从DOM中删除时调用。必须是由指令或实例方法删除,直接操作vm.$el不会触发这个钩子
            console.log(‘===== 删除DOM成功 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        beforeDestroy: function () {
            // 触发方式,在console里面打印app.$destroy()
            // 在开始销毁实例时调用。此时实例仍然有功能
            console.log(‘===== 销毁前 =====‘)
            console.log(this.name)
            console.log(this.$el)
        },
        destroyed: function () {
            // 触发方式,在console里面打app.$destroy()
            // 其中app.$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在
            // 在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑
            // 注意是解绑不是销毁,所有的子实例也已经被销毁
            console.log(‘===== 已销毁 =====‘)
            console.log(this.name)
            console.log(this.$el)
        }
    })
    

      

    打印出来的结果:

    接着在控制台修改data的值,更新视图:

    这个时候触发beforeUpdataupdated。接着执行app.$destroy()

    总结一下,对官方文档的那张图简化一下,就得到了这张图:

注:上图来自@浅白的《Vue生命周期》一文。示例也参考此文。

原文地址:https://www.cnblogs.com/xuqp/p/9393638.html

时间: 2024-10-04 04:51:34

Vue生命周期学习的相关文章

vue生命周期学习心得(下)

此文接vue生命周期学习心得(上)http://www.cnblogs.com/pengshadouble/p/7488330.html通过vue生命周期学习心得(上),大至了解了vue生命周期的8个阶段及相关钩子函数触发的时间点,这章我们通过简单的代码看一下具体的运行结果: <template> <div id="container"> <headers></headers> <router-view></router

Vue 生命周期学习心得(上)

什么是Vue生命周期? 我们知道每个Vue 实例在被创建之前都要经过一系列的初始化过程.开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等这一系列的过程,我们称这是Vue的生命周期.它包含了一个实例从创建到销毁的整个过程,同时在这个过程中也会运行一些我们自己的事件函数,给予我们机会在一些特定的场景下添加自己的代码,这就是我们通常说的生命周期钩子. 首先,让我们先看看完整的vue生命周期图(此图来源于网络): Vue的生命周期总共可以分为以下8个阶段: 一.beforeCreat

vue 生命周期初探

vue 以后发之势加上其独有的特性(压缩后很小),轻量级的MVVM框架,目前github star已有5.94万,而react 7万.由此可见是两个非常热门前端框架.这里就vue的生命周期做个初步体验. 发现看视频,动手之后,过段时间还是会忘,所以写一篇短文以备不时之需. 先附上官网的图片:vue生命周期 生命周期的钩子函数如果使用得当,会大大增加开发效率: 生命周期实践: 为了更好的查看beforeUpdate.updated,beforeDestroy,destroy钩子函数,使用v-on绑

Vue 生命周期方法

一.Vue 生命周期 Vue的生命周期即是实例从创建到销毁的一个过程.之前在学习Vue的时候,看过官网的教程,但是经常用到的是mounted,所以对其他生命周期方法不是很熟悉,这里有空做个总结,也方便以后查阅. 二.Vue生命周期方法 主要方法有:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,Destroyed.还有两个不常用的actived,deactivated,这两个方法用于被<kee

Vue生命周期详解(1)- 单个组件

刚接触vue,使用vue并没意识到生命周期的重要性.直到项目深入,在解决父组件异步加载数据传给子组件并渲染时首次渲染异常的问题时,浪费了很多时间,才发现自己对vue生命周期理解的欠缺.因此,这次专门重新学习一下vue的生命周期并总结在这里分享,希望对大家有所帮助. 首先上官方大图(是不是很高大上?然而,有点晦涩,对初学者不是很友好!) 不过不用担心,咱们程序员不就是实践出真知嘛!上代码: 1 <!DOCTYPE html> 2 <html lang="en">

vue生命周期的介绍

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue生命周期</title> 6 <script src="../js/vue.js"></script> 7 <meta name="viewport" content="width=devic

测试Servlet生命周期学习笔记

测试环境:windows xp旗舰版 软件环境:myclipse8.5+tomcat7.0 ********************************************************************************* 操作方法: 1.新建工程: File-->new-->Java Project-->TestServlet(工程名称)-->Finish. 2.加载servlet-api.jar类包: TestServlet(右键)-->B

vue 生命周期

一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></script> &

Vue生命周期及业务场景使用

vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么? beforeCreate 实例创建前:这个阶段实例的data.methods是读不到的created 实例创建后:这个阶段已经完成了数据观测(data observer),属性和方法的运算, watch/event 事件回调.mount挂载阶段还没开始,$el 属性目前不可见,数据并没有在DOM元素上进行渲染beforeMount:在挂载开始之前被调用:相关的 render 函数首