Vue框架学习04
一、Vue的生命周期
1、钩子函数
钩子函数
用于描述 Vue实例从创建到销毁的整个生命周期,具体如下表所示:
钩子 | 说明 |
---|---|
beforeCreate | 创建实例对象之前执行 |
created | 创建实例对象之后执行 |
beforeMount | 页面挂载成功之前执行 |
mounted | 页面挂载成功之后执行 |
beforeUpdate | 组件更新之前执行 |
updated | 组件更新之后执行 |
beforeDestroy | 实例销毁之前执行 |
destroyed | 实例销毁之后执行 |
2、实例创建
下面的代码将展示beforeCreate
和created
钩子函数的使用:
<div id="app">{{msg}}</div>
<script>
var vm = new Vue({
el: '#app',
data: { msg: '张三' },
beforeCreate () {
console.log('实例创建之前')
console.log(this.$data.msg)
},
created () {
console.log('实例创建之后')
console.log(this.$data.msg)
}
})
</script>
// 运行结果:
// “实例创建之前”
// error: Cannot read property 'msg' ...
// “实例创建之后”
// “张三”
上述代码中,beforeCreate
钩子函数输出msg时出错,这是因为此时数据还没有被监听,同时页面没有挂载对象。而created
钩子函数执行时,数据已经绑定到了对象实例,但是还没有挂载对象。
3、页面挂载
Vue 实例创建后,如果挂载点el
存在,就会进行页面挂载。下面的代码将展示beforeMount
和mounted
钩子函数的使用:
<div id="app">{{msg}}</div>
<script>
var vm = new Vue({
el: '#app',
data: { msg: '张三' },
beforeMount () {
console.log('挂载之前')
console.log(this.$el.innerHTML) // 通过this.$el获取el的DOM元素
},
mounted () {
console.log('挂载之后')
console.log(this.$el.innerHTML)
}
})
</script>
// 运行结果
// “挂载之前”
// {{msg}}
// “挂载之后”
// “张三”
上述代码中,在挂载之前,由于数据并没有被关联到$el
对象上,所以页面无法展示页面数据;在挂载之后,获得了msg数据,并通过插值语法展示到页面中。
4、数据更新
Vue 实例挂载完成后,当数据发生变化时,会执行beforeUpdate和updated钩子函数。下面的代码将展示beforeUpdate
和updated
钩子函数的使用:
<div id="app">
<div v-if="isShow" ref="self">test</div>
<button @click="isShow=!isShow">更新</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: false
},
beforeUpdate() {
console.log('更新之前')
console.log(this.$refs.self)
},
updated() {
console.log('更新之后')
console.log(this.$refs.self)
}
})
</script>
// 第一次点击‘更新’按钮:
// 更新之前
// undefined
// 更新之后
// <div>test</div>
// 第二次点击‘更新’按钮:
// 更新之前
// <div>test</div>
// 更新之后
// undefined
上述代码中,ref
用来给元素注册引用信息,设为self
表示引用自身。
5、实例销毁
生命周期的最后阶段是实例的销毁
,会执行beforeDestroy
和destroyed
钩子函数。
<div id="app">
<div ref="self">test</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '张三'
},
beforeDestroy() {
console.log('销毁之前')
console.log(this.$refs.self)
console.log(this.msg)
console.log(vm)
},
destroyed() {
console.log('销毁之后')
console.log(this.$refs.self)
console.log(this.msg)
console.log(vm)
}
})
</script>
// 在控制台中执行vm.$destroy()函数
// 运行结果:
// 销毁之前
// <div>test</div>
// 张三
// Vue{......}
// 销毁之后
// undefined
// 张三
// Vue{......}
从运行结果可以看出,vm
实例在beforeDestroy
和destroyed
函数执行时都存在,但是实例销毁之后获取不到页面的div元素。因此,实例销毁以后无法操作 DOM 元素。
参考资料: 1、《Vue.js 前端开发实战》,黑马程序员.