[vue] Vue的生命周期 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed

最新推荐文章于 2024-06-21 00:48:08 发布

533_

最新推荐文章于 2024-06-21 00:48:08 发布

阅读量1.8k

点赞数 1

分类专栏： # vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_14993591/article/details/121137032

版权

vue 专栏收录该内容

169 篇文章 3 订阅

订阅专栏

文章目录

生命周期：

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或组件实例对象。

组件创建期间的4个钩子函数

一、beforeCreate生命周期函数，vue实例创建前，data 和 methods 中的数据还没有被初始化

表示vue实例完全被创建之前，会执行这个函数

在beforeCreate生命周期函数执行的时候，data 和 methods 中的数据还没有被初始化

beforeCreate() {   
 	//组件实例创建前 
	console.log(this.msg) // undefined 表示此时data中得数据还没有初始化好
	console.log(this.add) // undefined 说明此时methods 中得方法还没有初始化好

},

二、created生命周期函数，vue实例创建完成，data 和 methods 都初始化完成

在 created 中，vue实例已经创建完成，data 和 methods 都已经被初始化好了！

如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作

created() {    

      // 组件实例创建完成  第二个生命周期函数 
      console.log(this.msg) //可以输出  说明 此时data的数据已经初始化完毕 
      console.log(this.add) //add()   说明此时methods 中的方法 已经初始化完毕
},

在这里插入图片描述

三、beforeMount生命周期函数，模板挂载到页面前

挂载前
表示模板已经在内存中编译完成，但是尚未把模板渲染到页面中

在beforeMount执行的时候，页面中的元素没有被真正替换过来，只是之前写的一些模板字符串

beforeMount() {  
	//挂载前，还没有将渲染模板挂载在el #app元素上
	// 输出 <p id="myp">{{msg}}</p>
    console.log(1, document.getElementById('myp')) 
   
     //说明 此时页面还没有重新渲染，还是旧页面，但是数据渲染出来的页面模板已经在浏览器的内存中，还没有将该渲染好的模板替换  el#app 中得模板
     
    console.log(document.getElementById('myp').innerText)  //{{msg}}

},

在这里插入图片描述

四、mounted生命周期函数，模板挂载到页面中

表示内存中的模板已经真实的挂载到页面中，用户已经可以看到渲染好的页面

这个mounted是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完

全创建好了，此时，如果没有其它操作的话，这个实例，就静静地在内存中不动

mounted() {    

     // 渲染模板已经挂载在el #app元素上
     console.log(document.getElementById('myp'))//输出 <p id="myp">我是定义的数据</p>
    
     //表示页面已经完成了渲染，浏览器内存中新的渲染模板页面已经替换掉了 el#app 中的旧模板页面，即el#app 容器已经加载了新的渲染模板
     document.onclick = function() {
         console.log('document点击事件')
     }

},

在这里插入图片描述

组件运行阶段的2个钩子函数

五、beforeUpdate生命周期函数

表示界面还没有被更新，但是数据肯定被更新了

得出结论：当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时data 数据是最新的，页面尚未和最新的数据保持同步

beforeUpdate() { 

      // 页面数据更新前触发
      console.log(this.msg) //输出结果： 我被修改了
      console.log(document.getElementById('myp').innerHTML) // 输出结果：我是定义的数据
      // 说明 此阶段 是数据已经被修改了，但是页面中的 el# app 容器内的 DOM 树还没有重新挂载到 el 上，页面上还是旧数据，但是浏览器 内存中已经更新了 新的DOM 树了，

},

在这里插入图片描述

六、updated生命周期函数

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

 updated() {
     // data 中的数据修改后，触发该生命周期函数
     console.log(this.msg) //输出结果： 我被修改了
     console.log(document.getElementById('myp').innerHTML) // 输出结果：我被修改了
     // 此时： 页面中的el #app 中的dom 已经重新挂载，页面渲染渲染了新数据的页面

 }

组件销毁阶段的2个钩子函数

七、beforeDestroy 生命周期函数

beforeDestroy 实例销毁前调用vm.$destroy()时触发，实例被销毁的前夕。

beforeDestroy() {
       console.log('beforeDestroy')

 }

在这里插入图片描述

八、destroyed生命周期函数

destroyed 实例销毁完毕该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。（以后页面就无法动态更新数据了。也就是说无法数据驱动视图。）

destroyed() {
      console.log('destroyed')

}

常用的生命周期钩子：

1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

code

<!--html代码片段-->
<body>
    <div id="app">
        <input type="text" placeholder="用户名" v-model='inpvalue' />
        <button @click='add'>添加</button>
        <p id="myp">{{msg}}</p>
        <button @click='edit'>修改数据</button>
    </div>
</body>

</html>
<script type="text/javascript">
    // js代码片段
    const vm = new Vue({
        el: '#app',
        data: {
            "msg": "我是定义的数据",
            "inpvalue": ''
        },
        methods: {
            add() {
                console.log(this.inpvalue)
            },
            edit() {
                this.msg = '我被修改了'
            }
        },
        beforeCreate() {
            //组件实例创建前 
            console.log(this.msg) // undefined 表示此时data中得数据还没有初始化好
            console.log(this.add) // undefined 说明此时methods 中得方法还没有初始化好
        },
        created() {
            // 组件实例创建完成  第二个生命周期函数 
            console.log(this.msg) //可以输出  说明 此时data得数据已经初始化完毕 
            console.log(this.add) //add()   说明此时methods 中得方法 已经初始化完毕
        },
        beforeMount() {
            //第三个生命周期函数(表示 挂载前，还没有将渲染模板挂载在el #app元素上)
            console.log(222)
            console.log(1, document.getElementById('myp')) // 输出 <p id="myp">{{msg}}</p>
                //说明 此时页面还没有重新渲染，还是旧页面，但是数据渲染出来的页面模板已经在浏览器的内存中，还没有将该渲染好得模板替换  el#app 中得模板
        },
        mounted() {
            // 第4个生命周期函数,渲染模板已经挂载在el #app元素上
          console.log(document.getElementById('myp'))//输出 <p id="myp">我是定义的数据</p>
            //表示页面已经完成了渲染，浏览器内存中新的渲染模板页面已经替换掉了 el#app 中得旧模板页					面，即el#app 容器已经过载了新的渲染模板
            document.onclick = function() {
                console.log('document点击事件')
            }
        },
        beforeUpdate() {
            // 页面数据更新前触发
            console.log(this.msg) //输出结果： 我被修改了
            console.log(document.getElementById('myp').innerHTML) // 输出结果：我是定义的数据
            // 说明 此阶段 是数据已经被修改了，但是页面中的 el# app 容器内的 DOM 树还没有重新挂载					到 el 上，页面上还是旧数据，但是浏览器 内存中已经更新了 新的DOM 树了，
        },
        updated() {
            // data 中的数据修改后，触发该生命周期函数
            console.log(this.msg) //输出结果： 我被修改了
            console.log(document.getElementById('myp').innerHTML) // 输出结果：我被修改了
            // 此时： 页面中的el #app 中的dom 已经重新挂载，页面渲染渲染了新数据的页面
        },
        beforeDestroy() {
            // 实例销毁前触发
        },
        destroyed() {
            // 实例销毁后触发
            document.onclick = null // 这样切换路由组件后，其他组件上就没有document点击事件了
        }
    })
</script>