理论: 生命周期钩子=生命周期函数=生命周期事件 beforeCreate： created: beforeMount： mounted： beforeUpdate=>updated=>beforeDestroy=>dastroyed
Vue入门
Vue生命周期
从Vue实例创建、运行、到销毁期间，总是伴随着各种事件， 这些事件的总和叫做生命周期 生命周期钩子
生命周期函数分类
在实例刚在内存中被创建出来，还没有初始化好data和methods属性
实例已经在内存中创建好，此时data和methods也创建好，此时还没有开始编译模板—- beforeMount
此时已经完成编译模板，但是还没有挂载到页面
此时编译模板已经挂载到页面指定容器中生命周期函数运行顺序
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue生命周期</title> <!--导入js文件--> <script type="text/javascript" src="vue.js"></script> </head> <body> <!--HTML--> <div id="app"> {{msg}} </div> <!--JavaScript--> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { msg: "hi vue", }, //在实例初始化之后，数据观测（data observer）和event、watcher事件配置之前被调用。 beforeCreate: function() { console.log('beforeCreate'); }, //在实例创建完成后被立即调用 //在这一步，实例已经完成以下的配置：数据观测（data observer），属性和方法的运算，watch、event事件回调。 //然而，挂载阶段还没开始，$el属性目前不可见。 created: function() { console.log('create'); }, //在挂在开始之前被调用，相关的渲染函数首次被调用 beforeMount: function() { console.log('beforeMount'); }, //el被新创建的VM.$el替换,挂载成功 mounted: function() { console.log('mounted'); }, //数据更新时调用 beforeUpdate: function() { console.log('beforeUpdate'); }, //组件DOM已经更新，组件更新完毕 updated: function() { console.log('updated'); }, }); //改变msg的值--定时器 setTimeout(function() { vm.msg = "change......"; }, 3000); </script> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
179