生命周期流程

在这里插入图片描述

$mount()方法：作用与el属性一样，都是可以将vue实例渲染到视图容器中

template属性：如果设置了这个属性，将来在页面上渲染时会将template作为页面的内容进行渲染

1. 创建一个vue实例
2. 初始化事件&生命周期

在创建vue实例时，这个对象其实是空的，到了这一步才慢慢开始执行一些内容

3. 初始化实例中的data与method

在这一步之前data与method其实是没有内容的

4. 判断并生成虚拟DOM

判断是否存在el属性：（el:是否指定的渲染容器）
- 如果存在：
  - 继续向下执行
- 如果不存在：
  - 当调用$mount方法时，继续向下执行
判断实例中是否存在template属性
- 如果存在：
  - 将template属性中对应的内容生成一个虚拟DOM
- 如果不存在：
  - 将<div id="app"></div>中的内容生成一个虚拟DOM

5. 将虚拟的DOM渲染到页面上

6. 页面会进入挂载完毕的状态等待data中的数据改变

如果data中的数据发生改变：
- 将虚拟DOM更新，并重新渲染到页面上，再次进入到挂载完毕的状态中

7. 销毁vue实例

当$destroy方法被调用时，会销毁
当从一个组件切换到另一个组件时。上一个vue组件的实例也会被销毁

注意点：

el:是否指定的渲染的容器
el和$mount其实是一样的，都是用来指定页面的渲染容器
template:
- 如果vue实例不存在，会直接将 <div id=“app”></div>中的内容渲染到页面上
- 如果vue实例存在，会直接将template属性中的内容渲染到页面上
虚拟DOM：
- 相当于将内容渲染到页面上进行的一次打草稿 （还存在指令）

生命周期钩子函数

在初始化data&method时执行

之前：beforeCreate
- 无法访问到data&methods中的内容
之后：created
- 可以访问到所有的data和method中的内容
- 用于:
  - 初始化某些属性值

在虚拟DOM渲染到页面上时执行

之前：beforeMount
- 在虚拟DOM渲染到页面之前执行，得到DOM结构和指令操作符
之后：mounted
- 在虚拟DOM渲染到页面之后执行，这里的指令操作符全部被替换成真实的数据 (真实dom)
- 用于：
  - 初始化页面完成后，再对html的dom节点进行一些需要的操作。

修改页面之前的data时执行

之前：beforeUpdate
- data中的数据已经改变了，它是在数据渲染到页面之前执行（数据已改变，dom还未渲染）
之后：updated
- data中的数据已经改变，它是在数据重新渲染到页面之后执行（数据已改变，dom重新渲染完毕）
- 页面显示的数据和data中的数据已经保持同步了，都是最新的

销毁vue实例时执行

之前：beforeDestroy
- Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
之后： destoryed
- 钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
- 这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。
- 用于：
  - 清除一些定时器

补充

第一次页面加载会触发哪几个钩子？
beforeCreate， created， beforeMount， mounted
<keep-alive> 生命周期钩子函数：activated、deactivated

被包含在<keep-alive>中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

activated ：在组件被激活时调用，使用<keep-alive>时在组件第一次渲染时也会被调用，之后每次 <keep-alive> 激活时被调用。
deactivated ：在组件被停用时调用。
注意：只有组件被 <keep-alive> 包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用
errorCaptured

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            msg: {
    
    {
    
     msg }}
        </div>
        <input type="text" v-model="msg">
        <button @click="msg='修改后的值'">点我修改 msg</button><br />
        <button @click="fn">点我销毁</button>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
    
    
        el: '#app',
        data() {
    
    
            return {
    
    
                msg: '修改前的值'
            }
        },
        methods: {
    
    
            fn() {
    
    
                this.$destroy()
            }
        },
        beforeCreate() {
    
    
            console.log('-----------beforeCreate----------')
            console.log(this.msg) // undefined
        },
        created() {
    
    
            console.log('-----------created----------')
            console.log(this.msg) // 修改前的值
        },
        beforeMount() {
    
    
            console.log('-----------beforeMount----------')
            console.log(this.$el)
        },
        mounted() {
    
    
            console.log('-----------mounted----------')
            console.log(this.$el)
        },
        beforeUpdate() {
    
    
            console.log('-----------beforeUpdate----------')
            console.log(this.msg)
        },
        updated() {
    
    
            console.log('-----------updated----------')
            console.log(this.msg)
        },
        beforeDestroy() {
    
    
            console.log('-----------beforeDestroy----------')
        },
        destroyed() {
    
    
            console.log('-----------destroyed----------')
        }
    })
</script>

</html>

生命周期流程&钩子函数