Vue学习笔记—生命周期

  1. Vue生命周期(life-cycle)
    1. 1、生命周期图示:
    2. 2、生命周期例子:
      1. 3、生命周期的过程:

Vue生命周期(life-cycle)

1、生命周期图示:

lifecycle


2、生命周期例子:

<div id="app">
    <input type="text" ref="myInput" name="" id="">
    {{msg}}
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: '1912'
        },
        beforeCreate() {
            // vue实例创建之前,这里什么都获取不到
            console.log('-----------beforeCreate------------');
            console.log(this.$data, this.$refs.myInput, this.$el);
        },
        created() {
            // vue实例创建完成,在这里可以做一些初始化的操作
            console.log('-----------created------------');
            console.log(this.$data, this.$refs.myInput, this.$el);
        },
        beforeMount() {
            // 挂载之前,这里虚拟DOM已经创建好了,但是还没有真实DOM
            console.log('-----------beforeMount------------');
            console.log(this.$data, this.$refs.myInput, this.$el);
        },
        mounted() {
            // 完成挂载,这里就能获取到真实DOM(类似于window.onload),一般初始的 Ajax 请求在这里发送
            console.log('-----------mounted------------');
            console.log(this.$data, this.$refs.myInput, this.$el);
        },
        beforeUpdate() {
            // 如果修改了数据,这是数据更新以后,DOM刷新之前,一般不使用
            console.log('-----------beforeUpdate------------');
            console.log(this.$data, this.$refs.myInput, this.$el);
        },
        updated() {
            // 如果修改了数据,这是数据更新以后,DOM也完成了刷新,一般也不使用
            console.log('-----------updated------------');
            console.log(this.$data, this.$refs.myInput, this.$el);
        },
        beforeDestroy() {
            // 销毁之前,一般在这里做一些善后工作,比如:清除定时器,或者在销毁之前向后端发送一些数据
        },
        destroyed() {
            // 销毁完成,这里没啥好做的
        }
    })
</script>

3、生命周期的过程:

创建:

  • beforeCreate: vue 实例创建之前,这里什么都获取不到
  • created: vue 实例创建完成,在这里可以做一些初始化的操作,一般初始的 Ajax 请求在这里发送

挂载:

  • beforeMount :挂载之前,这里虚拟 DOM 已经创建好了,但是还没有真实 DOM
  • mounted:完成挂载,这里就能获取到真实 DOM (类似于 window.onload

修改:

  • beforeUpdate:如果修改了数据,这是数据更新以后,DOM 刷新之前,一般不使用
  • updated:如果修改了数据,这是数据更新以后,DOM 也完成了刷新,一般也不使用

销毁:

  • beforeDestroy:毁之前,一般在这里做一些善后工作,比如:清除定时器,或者在销毁之前向后端发送一些数据
  • destroyed:销毁完成,这里没啥好做的

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:Vue学习笔记—生命周期

文章字数:604

本文作者:Spicy boy

发布时间:2018-08-11, 17:52:21

最后更新:2021-03-30, 15:44:39

原始链接:http://www.spicyboy.cn/2018/08/11/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏