生命周期流程&钩子函数

生命周期流程

在这里插入图片描述

$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
    • 可以访问到所有的datamethod中的内容
    • 用于:
      • 初始化某些属性值

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

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

修改页面之前的data时执行

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

销毁vue实例时执行

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

补充

  • 第一次页面加载会触发哪几个钩子?
    beforeCreatecreatedbeforeMountmounted
  • <keep-alive> 生命周期钩子函数:activateddeactivated

被包含在<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>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页