观察 Vue 实例从创建到销毁的完整生命周期
一、一个简单的 Vue 实例
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 从入门到精通，https://www.cnblogs.com/zuoyang/</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="example">
<span>{{title}}</span>
</div>
<script>
const HelloVueApp = {
data() {
return {
title: '你们的胃叫胃，孤的叫胃PLUS!'
}
}
}
Vue.createApp(HelloVueApp).mount('#example')
</script>
</body>
</html>
运行代码：
你们的胃叫胃，孤的叫胃PLUS!
二、生命周期
Vue 的实例在初始化时候，需要经历一系列的过程，如编译模版、渲染虚拟 DOM 树、将实例挂载到 DOM 上、设置数据监听和表数据绑定等。
在这些过程中，Vue 也允许开发者运行一些钩子函数，允许开发者在不同的阶段注入自己的代码。
让我们对上面的例子再做一些改变，绑定钩子函数，打印钩子函数的输出，来观察钩子函数执行的机制。
标签：生命周期,函数,实例,vuejs,钩子,Vue,入门 From： https://www.cnblogs.com/zuoyang/p/17058828.html