Vue 生命周期_vue.js

红色方框beforecreate，create，beforemount指的都是回调钩子，可以在这面执行逻辑。一般使用比较多的比如created在vue实例创建之后执行一些函数。还有mounted在渲染数据的时候执行一些函数。

created和mounted一般使用一个就可以了，希望在打开某个页面的时候，执行某些操作。比如页面刷新了或者打开他了，马上执行一些操作。比如在打开页面的时候就设置输入框里面的默认值。

mounted当渲染页面的时候就会这番逻辑。在这里面调用任何的函数，执行任何的操作，比如赋值，直接调用api都是可以写到这里面。

如果mounted里面没有达到预期，可以写到created，就是将mounted改为created。

 大概步骤如下：

（1）第一步创建vue实例，并且挂载，这里的el就是html的某个标签元素。

首先会有两个初始化阶段，第一个初始化阶段初始化events和你的生命周期，事件就是你定义的v-on的比如click和change这些。生命周期初始化之后钩子就都可以使用了。

做完第一步初始化之后就有了before create的钩子，这个钩子data method这些是基本上拿不到的。这个钩子是基本上不怎么使用的。

（2）第二步初始化注入和响应，注入其实就是data，method，watch，compute这些都写了的话它都会将其注入进去。那么它就完成响应式的这么一个功能。

到了created的时候就可以拿到data method这些数据了。

上面就是两步初始化的功能，其实就是将内部的一些准备事项，数据都放进去。这就是两部初始化。

两步初始化完了之后就会去判断有没有template模板，也即是vue的html，有template模板的话就会将template模板转化为render函数，render函数是用来做渲染的。渲染为一个dom元素，然后视图就生成了。

如果没有模板就去把html作为模板，也去转化为render函数。

转化为render函数就有一个beforemoun阶段，这个阶段一般可以去获取列表，刚进去的时候就有一个列表页，在这个阶段可以获取列表页，这个阶段可以拿到的数据都可以拿到了。

beforemount阶段之后就是创建页以及替换它，将整个vue实例创建出来，其实就是整个创建过程的结束，挂载。

接下来就可以使用这个页面了，在使用的时候会发生数据更新和变化。

挂载了之后会一直监听数据的变化，数据变化之后会去触发一个更新，在更新之前会有一个before update的阶段，在执行完了之后就会去触发更新。


生命周期是指 Vue 实例从创建到销毁的过程。 就是vue 实例从开始创建、 初始化数据、编译模板、挂载 Dom 、渲染 -> 更新 -> 渲染、卸载等一系 列过程。



在 vue 生命周期中提供了一系列的生命周期函数，如图所示。




Vue 生命周期_前端_02


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
        <p>{{ msg }}</p>
        <button @click="btn()">修改</button>
    </div>

    <script type="text/javascript">
const HelloVueApp = {
    data() {
         return {
            msg: 'hello aaa!'
         }
    },
    methods: {
          btn() {
          this.msg = 'hello bbb!'
      }
    },
        beforeCreate() {
           console.log('beforeCreate')
        },
        created() {
           console.log('created')
        },
        beforeMount() {
           console.log('beforeMount')
        },
        mounted() {
           console.log('mounted')
        },
        beforeUpdate() {
           console.log('beforeUpdate')
        },
        updated() {
           console.log('updated')
        }
}

    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

Vue 生命周期_初始化_03

 

Vue 生命周期_前端_04