专栏首页全栈开发之路Vue生命周期详细图解

Vue生命周期详细图解

(课程笔记,非原创)

图例

代码例

<div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{ msg }}</h3>
</div>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods: {
                show() {
                    console.log('执行了show方法')
                }
            },

beforeCreated 第一个生命周期函数 表示实例完全被创建出来之前,会执行它 此时data 和 methods 中的 数据都还没有没初始化

beforeCreate() {
    console.log(this.msg) //获取不到
    this.show() //获取不到
}

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

created() { 
    console.log(this.msg) // ok
    this.show() //执行了show方法
},

beforeMount 第三个生命周期函数 表示 模板已经在内存中编辑完成了,但是尚未把 模板渲染到 页面中 如果要调用 methods 中的方法,或者操作 data 中的数据,最早只能在 created 中操作 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串

beforeMount() { 
    console.log(document.getElementById('h3').innerText) // {{msg}}
},

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

mounted() { 
    console.log(document.getElementById('h3').innerText) // ok
},

beforeUpdate 界面没被更新,但是数据已更新

 beforeUpdate() { 
    console.log(document.getElementById('h3').innerText) // ok
    console.log('data 中的 msg 数据是:' + this.msg) //No
},

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

updated() { 
    console.log(document.getElementById('h3').innerText) // No
    console.log('data 中的 msg 数据是:' + this.msg) //No
},

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 三步在win10下启动MongoDB

    安装地址:https://www.mongodb.com/download-center#community

    杨肆月
  • Vue知识点

    MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。 View 代表...

    杨肆月
  • 2018-07-05 ES6学习

    扩展运算符用处:当arr2 = arr1时,arr2值改变,arr1也改变;改成arr2=[...arr1]可解决

    杨肆月
  • 聊聊API接口那些事

    Android开发:我们当初协商的时候data是个map,你现在给我返回一个list

    大话swift
  • SAP CRM, C4C和Hybris Commerce的数据迁移策略

    这三个SAP product都有个各自的data migration approach

    Jerry Wang
  • 一个最简单的WebSocket hello world demo

    https://github.com/i042416/KnowlegeRepository/blob/master/practice/nodejs/server...

    Jerry Wang
  • 一个最简单的WebSocket hello world demo

    代码里所需的server.js我已经上传到我的Github上了: https://github.com/i042416/KnowlegeRepository/...

    Jerry Wang
  • php DES加密算法实例分析

    由于PHP使用mcrypt扩展进行3DES加密,填充模式是跟JAVA以及.NET是不一样的,JAVA和.NET填充模式使用的是PKCS7。

    砸漏
  • web端引入微信(vue项目)

    用户4344670
  • 绘制SVG内容到Canvas的HTML5应用

    HT_hightopo

扫码关注云+社区

领取腾讯云代金券