Vue生命周期详解(图解)

程序员学习必备书籍推荐：

首先我们对Vue生命周期官方给出的图进行详细解释

什么是生命周期?
简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程
生命周期方法?
Vue从生到死的过程中伴随着各种各样的事件,这些事件会自动触发一些方法.这些方法我们统称为生命周期方法
生命周期钩子 = 生命周期函数 = 生命周期事件创建期间生命周期方法beforeCreate:created:beforeMountmounted
运行期间生命周期方法beforeUpdateupdated
销毁期间的生命周期方法beforeDestroydestroyed

代码解释:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue生命周期方法</title><!--引入vue框架--><script src="js/vue.js"></script>
</head>
<body>
<div id="app"><p>{{msg}}</p>
</div><script>let vm = new Vue({el:'#app',data:{msg:"IT程序员的日常"},methods:{say:function () {console.log("IT程序员的日常");}},beforeCreate:function () {/*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*///console.log(this.msg);//this.say();//console.log(this.say);},created:function () {/*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods* 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问*///console.log(this.msg);//this.say();// console.log(this.say);},beforeMount:function () {/*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/// console.log(document.querySelector("p").innerText);// console.log(document.querySelector("p").innerHTML);},mounted:function () {/*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/console.log(document.querySelector("p").innerText);console.log(document.querySelector("p").innerHTML);},beforeUpdate:function(){/*主要data中的数据发生了变化就会执行* 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据** */// console.log(this.msg);// console.log(document.querySelector("p").innerText);// console.log(document.querySelector("p").innerHTML);},updated:function () {/*主要data中的数据发生了变化就会执行* 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新** */console.log(this.msg);console.log(document.querySelector("p").innerText);console.log(document.querySelector("p").innerHTML);},beforeDestroy:function(){/*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用* 最后能使用Vue实例的地址* */},destroyed:function () {/** 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了* */}})
</script>
</body>
</html>

Vue生命周期详解(图解)相关推荐

vue 生命周期详解（附代码）
一. vue的生命周期是什么 vue每个组件都是独立的,都有自己的生命周期,从一个组件创建.数据初始化.挂载.更新.销毁,就是一个组件的生命周期. 一个组件首次加载时,也就只执行创建.数据初始化到挂 ...
vue 生命周期详解
详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称 ...
1.vue生命周期详解(2020.12.05)
vue生命周期,直接上官方图补一下引用vue的链接( src = "https://cdn.bootcss.com/vue/2.4.2/vue.js) 要明确生命周期,我们必须从钩子下手: ...
Vue系列之vue生命周期详解
文章の目录 1.什么是 vue 生命周期 2.生命周期钩子函数 2.1.beforeCreate(创建前) 2.2.created(创建后) 2.3.beforeMount(挂载前) 2.4.moun ...
【Vue】 Vue生命周期详解
每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期.在这个过程中,它经历了从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 通过这张流程图已经可以清晰的 ...
vue生命周期详解、钩子函数的调用（简单易懂）
定义:vue的生命周期是指vue实例从初始化创建到实例销毁的过程.期间会有8个钩子函数的调用. vue的钩子函数图解: vue的钩子函数使用总结: 1.beforeCreate(创建前):before ...
【Vue生命周期详解】
细谈Vue声明周期什么是生命周期? Vue的生命周期 beforeCreate( 创建前 ): created ( 创建后 ): beforeMount: mounted: beforeUpdate ...
Vue生命周期详解对应代码解析
-使用GitHub阅览对于Vue的实例,比如 const app = new Vue({...}) 浏览器解析到这段代码的时候,自动执行beforeCreate => created => ...
【vue】vue中axios的使用及vue生命周期详解_07
目录一. axios请求二. 生命周期

Vue生命周期详解(图解)

Vue生命周期详解(图解)相关推荐

最新文章

热门文章