文章目录
- 一、生命周期图示
- 二、常见的生命周期函数
- 三、生命周期函数执行场景
- 四、测试代码
- 五、项目开源地址
一、生命周期图示
二、常见的生命周期函数
| 常见的生命周期函数 | 执行的时间 |
|---|---|
| beforeCreate | Vue初始化 |
| created | Vue初始化 |
| beforeMount | 模板未渲染到页面上 |
| mounted | 模板已经渲染到页面上 |
| beforeDestroy | 只有Vue实例销毁的时候或者调用vm.$destroy()这个方法 |
| destroyed | 只有Vue实例销毁的时候或者调用vm.$destroy()这个方法 |
| beforeUpdate | 数据发生变化时，先触发beforeUpdate |
| updated | 数据发生变化时，再触发updated |
| 温馨提示 | 生命周期函数，直接卸载Vue实例中，不写在methods中 |
三、生命周期函数执行场景
刷新页面，会依次触发以下函数
Vue销毁时，会依次触发以下函数
当数据发生改变时，会依次触发以下函数
四、测试代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue实例生命周期函数</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root"></div><script>/*生命周期函数就是vue实例在某一个是点会自动执行的函数*/var vm = new Vue({el: '#root',template: "<div>{{content}}</div>",data: {content: 'hello world'},beforeCreate: function () {console.log("beforeCreate");},created: function () {console.log("created");},beforeMount: function () {console.log("beforeMount");/*模板未渲染到页面上*/console.log(this.$el);},mounted: function () {console.log("mounted");/*模板已经渲染到页面上*/console.log(this.$el);},beforeDestroy: function () {console.log("beforeDestroy");},destroyed: function () {console.log("destroyed");},beforeUpdate: function () {console.log(this.$data);console.log("beforeUpdate");},updated: function () {console.log(this.$data);console.log("updated");}});
</script>
</body>
</html>五、项目开源地址
xxx
