3-1 vue生命周期及实例的属性和方法-Vue生命周期

目录：

  • vue的生命周期
  • 生命周期图
  • 生命周期钩子函数实例

一、Vue生命周期

vue实例从创建到销毁的过程，称为生命周期，一共有8个阶段(选项 / 生命周期钩子)。

所有的什么周期钩子自动绑定  this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

二、生命周期图

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。中文图片如下：

这边是也可以参考官网的生命周期的图显示：生命周期图示

对生命周期钩子的说明：(以下被称为钩子函数)

beforeCreate：组件实例刚刚创建，初始化事件和生命周期

created(常用!!!)：实例已经创建完成，并且进行数据观测和数据配置

beforeMount:模板编译之前，还没挂载

mounted(常用!!!): 模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的显示

beforeUpdate：组件更新之前，意思就是如果发现data中的数据被修改，这个数据修改之前，这个时候用beforeUpdate

updated: 组件更新之后，就是说数据修改之后，叫updated

beforeDestroy: 组件销毁之前

destoryed: 组件销毁之后(销毁就是占用的内存空间被释放)

三、生命周期钩子函数实例

之前我们说过，在一个vue实例中有很多选项，比如：el、data、methods等，都是vue实例的选项，那么每一个钩子函数，其实都是vue实例的其中的选项。实例如下：

<body>
    <div id="box">
        {{msg}}
        <br>
        <!--更新数据-->
        <button @click="update">更新数据</button>
        <!--销毁vue实例对象-->
        <button @click="destroy">销毁vue实例对象</button>
    </div>
    <script type="text/javascript" src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data:{
                msg: "高哥哥真帅"
            },
            methods: {
                update(){  //只有更新数据的时候才会去执行beforeUpdate(更新数据前),updated(更新数据后)
                    this.msg = "傻逼鸿好丑";
                },
                destroy(){   //执行vm.$destroy()销毁vue实例，才会去执行beforeDestroy(销销毁vue实例前)，destroyed(销毁vue实例后)
                    this.$destroy();
                }
            },
            beforeCreate(){
                alert("组件实例刚刚创建，初始化事件和生命周期")
            },
            created(){
                alert("实例已经创建完成，并且进行数据观测和数据配置")
            },
            beforeMount(){
                alert("模板编译之前，还没挂载")
            },
            mounted(){
                alert("模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的显示")
            },
            beforeUpdate(){
                alert("组件更新之前")
            },
            updated(){
                alert("组件更新之后")
            },
            beforeDestroy(){
                alert("组件销毁之前")
            },
            destroyed(){
                alert("组件销毁之后")
            }
        });
    </script>
</body>

 

posted @ 2020-03-04 16:12  帅丶高高  阅读(355)  评论(0)    收藏  举报