Vue生命周期函数详解

生命周期图

生命周期方法

var vm = new Vue({el: '#app',data: {msg:'ok'},methods: {show:function () {console.log("执行了show方法");},//调用钩子函数destroydestroy(){//通过this来调用，this表示全局对象this.$destroy();}},beforeCreate(){/*这是一个生命周期函数，表示在实例完全创建出来之前会执行他在执行beforeCreate时，data和methods中的数据还没有初始化*/console.log(this.msg);    //undefined},created(){/*第二个生命周期函数在created中，data和methods都已经初始化好如果要调用methods中的方法或者data中的数据，最早只能在created中操作*/console.log(this.msg);   //okthis.show();   //执行了show方法},beforeMount(){/*这是第三个生命周期函数，此时模板已经在内存中编辑完成了，但尚未把模板渲染到页面中也就是在 beforeMount 执行的时候，页面中的元素还没有真正替换过来，只是之前写的模板字符串*/console.log(document.getElementById("h3").innerText);   //{{ msg }}},mounted(){/*这是第四个生命周期函数，表示内存中的模板已经真实的挂载带页面中去了，用户可以看到渲染好的页面注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted后，表示实例别完全创建好了如果要操作元素的DOM操作，最早在mounted中操作*/console.log(document.getElementById("h3").innerText);   //ok},//接下来的是运行中的两个事件beforeUpdate(){/*表示 我们的界面还没有更新，但是数据已经更新了也就是执行beforeUpdate时，页面中显示的数据还是旧的，此时，data中的数据已经更新了*/console.log("页面中的值：" + document.getElementById("h3").innerText);   //okconsole.log("data中msg的值" + this.msg);   //No},updated(){/*执行时，页面中的数据与data中的数据已经同步了*/console.log("页面中的值：" + document.getElementById("h3").innerText);   //Noconsole.log("data中msg的值" + this.msg);   //No},beforeDestroy() {/*当执行该函数时，Vue实例已经从执行阶段进入了销毁阶段，但是实例上所有的data和methods、过滤器、指令都还可用，此时还没有真正的销毁*///注意：当时用了定时器时，需要我们在该函数下手动的销毁定时器，否则会造成内存泄漏},destroyed(){/*当执行了该函数时，组件已经完全被销毁，组件中所有的数据、方法、指令、过滤器都已经不可用了*/}});

Vue生命周期函数详解相关推荐

Vue生命周期函数(详解)
什么是Vue生命周期? Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载 Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期. Vu ...
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生命周期官方给出的图进行详细解释 vue生命周期详细图解什么是生命周期? 简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程 Vue实例有一个完整 ...
Vue系列之vue生命周期详解
文章の目录 1.什么是 vue 生命周期 2.生命周期钩子函数 2.1.beforeCreate(创建前) 2.2.created(创建后) 2.3.beforeMount(挂载前) 2.4.moun ...
微信小程序销毁某一注册函数_微信小程序生命周期函数详解
微信小程序生命周期函数小程序中判断当前首页是从其他页面返回,还是由入口打开由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化解决方法:在小程序 data ...
【Vue】 Vue生命周期详解
每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期.在这个过程中,它经历了从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 通过这张流程图已经可以清晰的 ...
vue生命周期图详解，流程图
生命周期图示: https://cn.vuejs.org/v2/guide/instance.html#生命周期图示生命周期钩子: https://cn.vuejs.org/v2/api/#选项-生 ...

Vue生命周期函数详解

生命周期图

生命周期方法

Vue生命周期函数详解相关推荐

最新文章

热门文章