每个Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

<template><div id="myid"></div>
</template>
<script>
import AChild from "./components/AChild.vue" //导入AChild组件模板
export default {components: {AChild},data() {return {name: "lily"}},beforeCreate() {//这个钩子函数会在实例初始化完成props 解析之后，data() 和 computed 等选项处理之前立即调用。//beforeCreate（）创建前，视图view，data模型都未被创建//console.log(this.name)  //此时无法访问data中的数据//this.myClick();         //此时无法访问methods中的方法//用途：//1、可以做页面拦截。当进一个路由的时候我们可以判断是否有权限进去，是否安全进去，携带参数是否完整，参数是否安全。使用这个钩子好函数的时候就避免了让页面去判断，省掉了创建一个组建Vue实例。//2、可以做自定义重定向。当路由还没有进去时我们判断是否正确进去，若不正确进去可以重定向到指定的页面。//3、依赖注入：在beforeCreate钩子函数中，你可以访问到组件的依赖注入，例如通过this.$options.inject 来获取注入的属性或方法。这可以用于实现组件之间的通信或共享数据。},created() {//当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此不能在这里操作Dom模板:document.getElementById("myid")//beforeCreate（）创建前，视图view，data模型都未被创建console.log(this.name) //此时已经可以访问data中的数据了this.myClick();        //此时已经可以访问methods中的方法了//一般用在对data中的数据做初始化处理：比如发起ajax请求数据赋值给data中的变量},beforeMount() {//组件挂载到节点之前执行的函数，此时无法用document.getElementById,因为此时组件还未挂载到节点//注释:假如一个页面相当于一棵树，组件就是它的枝叶，当前的状态就是我们制作好了枝叶，但是还没有将这个枝叶挂到这颗树上，因此不能在这里操作Dom模板:document.getElementById("myid")//beforeMount（） 挂载前，视图view未被真正进行创建，只是进行占位；data模型被创建//在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取},mounted() {//比较常用的钩子//组件挂载完成后执行的函数（页面开始渲染后执行，mounted只会执行一次，可用来实现页面初始化）//注释:我们制作好了枝叶，而且已经将枝叶挂到这颗树上，所以此时可以在这里操作Dom模板//mounted（） 挂载后，视图view被真正创建并进行数据绑定；data模型被创建//this.$nextTick监听函数的作用是：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（通俗理解为：某个状态改变立即更新）this.name="张三";this.$nextTick(()=>{ //这个this.$nextTick其实是在updated钩子函数之后才会被执行。//应用场景是：假设我有一个name只要这个name改变，比如说改变为张三，那么此时我们就需要new一个名字为张三的人。当name改变为李四了，那么就需要创建一个名字为李四的人//那有人就说了为什么这个动作不放到updated钩子函数中去做呢？我们之所以这么做是考虑的性能问题，因为这个组件其他的任何一个状态改变都会走updated钩子函数，比如age发生改变，email发生改变。等等都会走updated钩子函数//而此时我们的需求是name改变才会new一个人。所以new一个人的动作就放到mounted钩子函数中来处理，不用到放到updated钩子函数中去执行，即便做了更新操作， 生命周期会走到updated钩子函数中，但是钩子函数中没用这个new一个人的动作，所以也不会被执行到，只有这里才会被执行到，提升了性能})window.onresize=()=>{ //案例：这里我们做了一个调整窗口大小监听事件（注意：这个事件是一个window事件，它不是在我们页面的Dom中进行绑定的，即便组件卸载了挂载到window的事件还在所以组件卸载前，或者组件卸载后需要手动进行解绑，否则一直在这里执行，会导致内存泄漏的危险）console.log(window.innerWidth, window.innerHeight)}},beforeUpdate() {//组件更新之前执行的函数（Dom更新前执行）//注释:假如一个页面相当于一棵树，组件就是它的枝叶，当前的状态就是以前的树叶掉了，我们重新制作好了新的枝叶，但是还没有将这个新的枝叶挂载到这颗树上，所以此时不能在这里操作Dom模板//beforeUpdate（）更新前，data模型被更新，view视图未被更新；更新前的准备。只有view上面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发。},updated() {//组件更新完毕后执行的函数（Dom更新后执行）//注释:我们制作好了新的枝叶，而且已经将新的枝叶挂到这颗树上，所以此时可以在这里操作Dom模板//updated（）更新后，view和data都被更新，更新完成},beforeUnmount() {//组件卸载之前执行的函数//一般可以在此处移除一些时间,window，或者其他的事件监听window.onresize=null  //移除window监听事件},unmounted() {//组件卸载完成后执行的函数},methods: {myClick() {console.log(123);}}}</script>