2021-1-17.1
2021/12/22 23:20:33
本文主要是介绍2021-1-17.1,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
id: vue1
title: Vue实例生命周期
author: triumph
author_title: Vue生命周期
author_url: https://github.com/triumph-star
author_image_url: https://avatars1.githubusercontent.com/u/62491299?s=460&u=5ac99fc28c82063aa357d074bfe184e50f10a4b4&v=4
tags: [Vue]
Vue实例的生命周期
生命周期
:从实例创建、运行到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期.
vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,生命周期钩子
:就是生命周期事件的别名
主要的生命周期函数:
被创建期间的生命周期函数
:
+ beforeCreate():实例在内存中被创建出来,此时,还没有初始化data和methods属性
+ created(): 实例已经在内存中创建完成,此时data和methods已经创建完成,此时还没有开始编译模板
+ beforeMount():此时已经完成了模板的编译,但是还没有挂载到页面中
+ mounted():此时,已经将编译好的模板,挂载到了页面指定的容器中显示
运行期间的生命周期函数
:
+ beforeUpdate(): 状态更新之前执行次函数,此时data中的状态是最新的,但是界面数据并未更新,因为此时还未重新渲染DOM节点
+ updated():实例更新完成后调用此函数,此时data中的状态值和界面上显示的数据都已经完成了更新。界面也已经被重新渲染完成。
销毁期间的生命周期函数
:
+ beforeDestroy: 实例销毁之前调用,此时,实例仍然可以可用。
+ destroyed: Vue实例销毁后调用,调用后,Vue实例指示的所有东西都会被解绑,事件监听器被全部移除,所有子实例也一样。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Vue生命周期</title> </head> <body> <div id="app"> <h1 id="h1">{{msg}}</h1> <button @click="msg='react'" >修改</button> </div> </body> </html> <script> /*创建Vue实例,得到viewModel*/ const vm = new Vue({ el: "#app", data: { msg: "Vue" }, methods: { show() { console.log('执行了show()'); } }, beforeCreate() { //实例完全被创建出来之前,会执行它 console.log("实例被创建之前"); // this.show(); // console.log(this.msg); // 在此阶段,data和methods()均未初始化 }, created() { //实例创建完成调用 console.log("实例被创建"); // console.log(this.msg); // this.show(); // }, beforeMount() {//此时,模板已经存在内存中编辑完成了。但是尚未把模板渲染到页面中 console.log("实例被挂载之前"); // const renderText = document.querySelector('h1').innerText; // console.log(renderText); //在此时,页面中的元素,还未真正被替换过来,只是之前写的一些模板字符串 }, mounted() {//此时,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了 console.log("实例挂载完成"); // const renderText = document.querySelector('h1').innerText; // console.log(renderText); //此函数是 实例创建期间的最后一个生命周期函数,当执行完后,表明,实例已经被完全创建完成,如果无更新内容一直在内存中 }, beforeUpdate() {//此时页面还没被更新,数据已经更新 console.log("更新data"); // const renderPageText = document.querySelector('h1').innerText; // console.log('页面内容:' + renderPageText); // console.log('data中的数据' + this.msg); }, updated() { console.log("同步data和页面数据"); // const renderPageText = document.querySelector('h1').innerText; // console.log('页面内容:' + renderPageText); // console.log('data中的数据' + this.msg); //此时页面和data数据已经保持同步啦 }, beforeDestroy() { //console.log("执行销毁实例之前"); // const renderPageText = document.querySelector('h1').innerText; // console.log('页面内容:' + renderPageText); // console.log('data中的数据' + this.msg); }, destroyed() { //console.log("实例已经销毁"); }, }); </script>
此段来自
- 常用的生命周期方法:create()/mounted():常用于发送Ajax请求启动定时器等异步任务,beforeDestory():常用于做一些收尾工作,例如关闭定时器;
<body> <div id="app"> <button @click= "destroyVm">点击我取消Vue实例</button> <p v-show = "isShow">我是四川码酱</p> </div> <script src="js/vue.js" type="text/javascript"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { isShow: true }, beforeCreate() { console.log("我是beforeCreate方法,我被执行了"); }, created() { console.log("我是created方法,我被执行了"); }, beforeMount() { console.log("我是beforeMount方法,我被执行了"); }, mounted(){ // 初始化显示之后立即调用,也是执行一次 this.intervalId = setInterval(() =>{ console.log("====="); this.isShow = !this.isShow; }, 1000) }, beforeUpdate() { console.log("我是beforeUpdate方法,我被执行了"); }, updated() { console.log("我是updated方法,我被执行了"); }, beforeDestroy() { // 死亡之前回调一次 console.log("我是beforeDestroy方法,我要被销毁了"); // 清除定时器 clearInterval(this.intervalId) }, destroyed() { console.log("我是destroyed方法,我被执行了"); }, methods: { destroyVm(){ this.$destroy(); } } }) </script> </body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KSH9TKyJ-1640183588851)(img/lifecycle.png)]
关于Vue更多
这篇关于2021-1-17.1的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-02Java微服务系统项目实战入门教程
- 2024-11-02Java微服务项目实战:新手入门指南
- 2024-11-02Java项目实战:新手入门教程
- 2024-11-02Java小程序项目实战:从入门到简单应用
- 2024-11-02Java支付系统项目实战入门教程
- 2024-11-02SpringCloud Alibaba项目实战:新手入门教程
- 2024-11-02Swagger项目实战:新手入门教程
- 2024-11-02UNI-APP项目实战:新手入门与初级教程
- 2024-11-02编译部署资料入门教程:一步步学会编译和部署
- 2024-11-02地图服务资料入门指南