015_Vue生命周期

1. 生命周期主要阶段

1.1. 挂载(初始化相关属性)

beforeCreate
created
beforeMount
mounted

1.2. 更新(元素或组件的变更操作)

beforeUpdate
updated

1.3. 销毁(销毁相关属性)

beforeDestroy
destroyed

1.4. 生命周期图示

2. 生命周期例子

2.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>生命周期</title></head><body><div id="app"><div>{{msg}}</div><button @click='update'>更新</button><button @click='destroy'>销毁</button></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {msg: '生命周期'},methods: {update: function(){this.msg = 'hello';},destroy: function(){this.$destroy();}},// 挂载beforeCreate: function(){console.log('beforeCreate');},created: function(){console.log('created');},beforeMount: function(){console.log('beforeMount');},mounted: function(){console.log('mounted');},// 更新beforeUpdate: function(){console.log('beforeUpdate');},updated: function(){console.log('updated');},// 销毁beforeDestroy: function(){console.log('beforeDestroy');},destroyed: function(){console.log('destroyed');}});</script></body>
</html>

2.2. 效果图

2.3. 点击更新按钮

2.4. 点击销毁按钮

015_Vue生命周期相关推荐

LTV 即用户生命周期价值
20220321 https://mp.weixin.qq.com/s/kPoojfRCbvCCV4zpnCimmQ 指标计算详细介绍数据分析|如何做好用户生命周期价值分析 LTV https:// ...
Harmony生命周期
Harmony生命周期系统管理或用户操作等行为,均会引起Page实例在其生命周期的不同状态之间进行转换.Ability类提供的回调机制能够让Page及时感知外界变化,从而正确地应对状态变化(比如释放 ...
Activity在有Dialog时按Home键的生命周期
当一个Activity弹出Dialog对话框时,程序的生命周期依然是onCreate() - onStart() - onResume(),在弹出Dialog的时候并没有onPause()和onSto ...
横竖屏切换时Activity的生命周期
1.不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏执行一次,切竖屏执行两次. 2.设置Activity的android:configChang ...
Android中Service生命周期、启动、绑定、混合使用
一.Activity和Service如何绑定: 1.Service和Activity之间的连接可以用ServiceConnection来实现.实现一个ServiceConnection对象实例,重写o ...
Cocos生命周期回调
Cocos Creator 为组件脚本提供了生命周期的回调函数.用户只要定义特定的回调函数,Creator 就会在特定的时期自动执行相关脚本,用户不需要手工调用它们. 目前提供给用户的生命周期回调函数 ...
Fragment 使用 replace 的方式实现切换以及切换的时候Fragment 生命周期
这个主要代码在activity里面如下 public class ReplaceActivity extends AppCompatActivity implements View.OnClickL ...
Fragment 使用 show 和 hide 的方式实现切换以及切换的时候Fragment 生命周期
实现的效果如下图主要的代码在activity 这里贴出来了 public class ShowActvity extends AppCompatActivity implements View.On ...
ViewPager与Fragment结合使用，以及切换的时候Fragment 的生命周期
下面要做的效果图下图首先我们创建一个适配器如下 public class FraPagerAdapter extends FragmentPagerAdapter {private List< ...

015_Vue生命周期

015_Vue生命周期相关推荐

最新文章

热门文章