文章目录
1.Vue生命周期定义
Vue的生命周期是指:
Vue实例从创建到销毁的过程
Vue的生命周期包括:
生命周期函数 又叫 钩子函数
创建前后:
beforeCreate( 创建前 )
实例还没被创建出来,el和data都没有初始化,不能访问data、method,一般在这个阶段不进行操作
created( 创建后 )
vue实例中的data、method已被初始化,属性也被绑定,但是此时还是虚拟dom,真实dom还没生成,$el 还不可用。这个时候可以调用data和method的数据及方法,created钩子函数是最早可以调用data和method的,故一般在此对数据进行初始化。
挂载前后:
beforeMount( 挂载前)
此时模板已经编译完成,但还没有被渲染至页面中(即为虚拟dom加载为真实dom),一般可以在这里做初始数据的获取。
Mounted( 挂载后)
此时模板已经被渲染成真实DOM,用户已经可以看到渲染完成的页面,页面的数据也是通过双向绑定显示data中的数据。 这实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了
更新前后:
beforeUpdate
更新状态,重新渲染之前触发,
然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。
只有view上面的数据变化才会触发beforeUpdate和updated,仅属于data中的数据改变是并不能触发。
updated
数据已经更改完成,dom也重新render完成。
销毁前后
beforeDestroy
销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)
destroyed
销毁后 (Dom元素存在,只是不再受vue控制),卸载watcher,事件监听,子组件。
2.Vue执行顺序
1.beforeCreate()
2.created()
3.beforeMounted()
4.mounted()
5.beforeDestroy()
6.destroyed()
3.vue内置方法的执行顺序
1.props
2.methods
3.data
4.computed
5.watch
4.示例
<div id="app">
<h1>
{{message}}
</h1>
<h1 id="hh">{{num}}</h1>
<button @click='add'>点击+1</button>
<button>点击跳转</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue22222!',
num: 1995
},
methods: {
fn1() {
console.log('fn1')
},
add() {
this.num++
}
},
// 以下是VUE的生命周期
// 生命周期定义 在一个应用 创建到消亡阶段 在某一时刻 会自动调用的回调函数就叫做生命周期
// 实例创建之前 内部 new操作符初始化
beforeCreate() {
console.log('创建之前beforeCreate ')
console.log(this.message)
// console.log(this.fn1())
},
// 实例创建之后 内部 new操作符初始化
created() {
// 向服务器请求 渲染出 城市天气预报 ajax
// 用法 数据 方法都可以调用 最快发送AJAX的时刻
console.log('创建之前 Created 实例创建之后 ')
console.log(this.message)
console.log(this.fn1())
// 这个时候 有问题的地方
var h = document.getElementById('hh')
console.log('h', h)
// 因为数据没有完全渲染的关系 如果进行dom操作 就有问题
},
// dom渲染之前
beforeMount() {
console.log('beforeMount')
var h = document.getElementById('hh')
console.log('h', h)
console.log(this.message)
console.log(this.fn1())
},
// dom渲染后
mounted() {
// 这个位置是最快可以DOM操作的位置 不会获取到假的节点!!!
console.log(' Mounted')
var h = document.getElementById('hh')
console.log('h', h)
console.log(this.message)
console.log(this.fn1())
},
// 更新之前 数据和视图联系的数据 更新之前会自动调用
beforeUpdate() {
console.log('beforeUpdae')
var h = document.getElementById('hh')
console.log('h', h)
console.log('h', h.innerHTML)
console.log('this.num',this.num)
},
// 更新之后 数据和视图联系的数据 更新之后会自动调用
updated() {
console.log('updated')
var h = document.getElementById('hh')
console.log('h', h)
console.log('h', h.innerHTML)
console.log('this.num',this.num)
// if(this.num >2000) {
// this.num =1999
// }
},
// 销毁之前
beforeDestory() {
console.log(' beforeDestory')
},
// 销毁之后
destoryed(){
console.log(' destoryed')
// 跳完页面 上一个页面 没用变量 函数 需要 遍历做 a=null的处理
}
})
console.log(app)
</script>