vue生命周期函数

作者: IT小池 | 来源:发表于2018-09-19 11:13 被阅读28次

先看完函数介绍,在看下面的生命周期函数图示把

beforeCreate

第一个生命周期函数,表示实例完全被创建出来之前,会执行它
注意: 在 beforeCreate 生命周期函数执行的时候,data 和 methods 中的 属性与方法定义都还没有没初始化

created

第二个生命周期函数,在 created 中,data 和 methods 都已经被初始化好了! 如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作

beforeMount

第三个生命周期函数,表示 模板已经在内存中编辑完成了,但是尚未把 模板渲染到 页面中。
在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串

mounted

第四个生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
注意: mounted 是 实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的 躺在我们的内存中,一动不动

此时,表示vue实例已经初始化完毕了,组建已脱离创建阶段,进入运行阶段了。接下来的是运行中的两个事件

beforeUpdate()

这时候,表示 我们的界面还没有被更新【数据被更新了吗? 数据肯定被更新了】

updated

updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的

beforeDestroy

销毁之前执行,当beforeDestroy函数执行时,表示vue实例已从运行阶段进入销毁阶段,vue实例身上所有的方法与数据都处于可用状态

destroyed

当destroy函数执行时,组件中所有的方法与数据已经被完全销毁,不可用

activated

页面出现的时候执行 activated生命周期函数,跟 监听 watch 有类似的作用。
activated生命周期函数,是配合 keep-alive 进行使用。进入页面时,mountedactivated 生命周期函数都会执行,当前 keep-alive 时,进行了缓存,这时返回上一页 ,mounted生命周期函数不会执行,而 activated 会执行。
注意:新增

deactivated

页面消失的时候执行,deactivated生命周期函数
注意:新增

<body>
   <div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{ msg }}</h3>
  </div>
  <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 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的 躺在我们的内存中,一动不动
      },
      // 接下来的是运行中的两个事件
      beforeUpdate() { // 这时候,表示 我们的界面还没有被更新【数据被更新了吗?  数据肯定被更新了】
         console.log('界面上元素的内容:' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是:' + this.msg) 
        // 得出结论: 当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和 最新的数据保持同步
      },
      updated() {
        console.log('界面上元素的内容:' +     document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是:' + this.msg)
        // updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最    新的
      }
    });
  </script>
</body>
看一下生命周期函数的图示 lifecycle.png

相关文章

  • Vue学习笔记(12)-生命周期函数

    生命周期函数 生命周期函数代表的是Vue实例,或者是Vue组件,在网页中各个生命阶段所执行的函数。生命周期函数可以...

  • 😄--前端面试整理--VueJs

    1、Vue的指令都有哪些? 2、Vue的生命周期函数 3、除了生命周期函数还有哪些钩子函数 4、Vue组件是怎么进...

  • vue生命周期

    学习vue的生命周期 什么是生命周期函数? vue的生命周期函数(又称为钩子函数)是一个vue实例从开始创建,到初...

  • Vue生命周期函数调用的时间

    vue的生命周期函数有11个,常用的8个生命周期函数必须要掌握

  • vue基础知识精讲

    一、Vue实例生命周期函数 生命周期函数是vue实例在某一个时间点会自动执行的函数。 测试一下: 二、Vue的模板...

  • 了解vue.js的生命周期函数

    了解vue的生命周期函数和运行中事件,有助于我们更好地使用vue 具体代码文件 四个生命周期函数 beforeCr...

  • Vue生命周期

    Vue生命周期详解 一、Vue生命周期 与 作用 (生命周期钩子就是生命周期函数) (1)Vue生命周期:每个Vu...

  • Vue 生命周期

    生命周期函数 生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数 简单来说就是,钩子(生命周期函数)就好...

  • vue的生命周期

    了解vue的生命周期函数和运行中事件,有助于我们更好地使用vue 四个周期函数: beforeCreate :第一...

  • vue.js 生命周期

    Vue实例 生命周期函数流程 —— beforeCreate、created、beforeMount、mounte...

网友评论

    本文标题:vue生命周期函数

    本文链接:https://www.haomeiwen.com/subject/fvobnftx.html