关于Vue生命周期的实例讲解
程序员文章站
2023-11-02 16:01:40
一、生命周期
vue 应用都是通过 vue 实例（viewmodel）完成的，vue 创建实例需要一系列的初始化动作，需要设置数据监听、编译模板、将实例挂载到 dom 并在数据变...
一、生命周期
vue 应用都是通过 vue 实例（viewmodel）完成的，vue 创建实例需要一系列的初始化动作，需要设置数据监听、编译模板、将实例挂载到 dom 并在数据变化时更新 dom 等。当然创建实例只是生命周期的一部分。
在 vue 对象声明周期的每个阶段都会运行一些叫生命周期的钩子函数，在对应的钩子函数中，可以添加自己的代码以达到某种特定的功能。
钩子函数：
beforecreate：vue 实例初始化之后执行，但是此时 vue 实例数据与 el 数据都为空
created：vue 实例中的数据已经绑定，但是 el 为空
beforemount：在 el 挂载之前执行
mounted：此时 el 已经被挂载到指定的 dom 节点
beforeupdate：vue 实例数据更新之后执行，但是页面中的数据并没有更新
updated：页面数据更新之后执行
beforedestroy：vue 实例销毁之前执行
destroyed：实例销毁之后执行
二、代码演示
我们通过对应的钩子函数来说明 vue 对象的生命周期，你可以拷贝下面的代码，在控制台观察运行结果
html 代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue实例_生命周期</title>
</head>
<body>
<p id="test">
<p>更新次数：{{count}}</p>
<button @click="destroyvue">destory vue</button>
</p>
</body>
</html>
vue.js 代码
<!-- 引入本地的 vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new vue({
el: '#test',
data: {
count: 0
},
beforecreate() {
console.log('beforecreate()')
},
created() {
console.log('created()')
},
beforemount() {
console.log('beforemount()')
},
// 在挂载之后执行一个定时任务，不断地显示与隐藏 'hello vue.js'
mounted() {
console.log('mounted()')
this.intervalid = setinterval(() => {
// 更新 'count',触发 beforeupdate() 与 updsted()
this.count ++
}, 1000)
},
beforeupdate() {
console.log('beforeupdate() ' + this.count)
},
updated () {
console.log('updated() ' + this.count)
},
// 在对象销毁之前，清除定时任务
beforedestroy() {
console.log('beforedestroy()')
clearinterval(this.intervalid)
},
destroyed() {
console.log('destroyed()')
},
// 给按钮绑定一个事件：销毁当前 vue 对象
methods: {
destroyvue () {
this.$destroy()
}
}
})
</script>
ps：
常用的钩子函数：
mounted()：用于发送 ajax 请求，启动定时任务等 beforedestory()：做一些收尾工作，用于清除定时任务等