首页 > 其他分享> 文章详细

vue生命周期讲解

2022-05-11 22:01:12 阅读：136 来源： 互联网

标签：生命周期函数 DOM 钩子 vue 讲解 data

1.生命周期，简而言之就是一个事务从出生到消失的过程。例如，一个人从出生到去世。

在这里我们是指从创建vue对象到销毁vue对象的过程

2.钩子函数

（1）钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行

（2）作用：特定的时间，执行特定的操作

3.vue生命周期之初始化阶段

new Vue()： Vue实例化对象(组件也是一个的vue实例化对象)
Init Events & Lifecycle：初始化事件和生命周期函数
beforeCreate：生命周期函数被执行此时不能访问data和menthods等中的东西
Init injections&reactivity：vue内部添加data和methods等
created：生命周期钩子函数被执行，实例创建此时能访问data和menthods等中的东西
接下来开始编译模板：开始分析
Has el option? ：是否有el选项 – 检查要挂到哪里
没有. 调用$mount()方法
有, 继续检查template选项

4.vue生命周期之挂载

template选项检查:
有：编译template返回render渲染函数
无：编译el选项对应标签作为template(要渲染的模板）vue工程项目不支持
虚拟DOM挂载成真实DOM之前:
beforeMount ：生命周期钩子函数被执行
Create：把虚拟DOM和渲染的数据一并挂到真实DOM上
挂载完毕，mounted：生命周期钩子函数被执行

5.vue之更新

当data里数据改变, 更新DOM之前，beforeUpdate – 生命周期钩子函数被执行此时获取不到更新的真实dom
Virtual DOM：虚拟DOM重新渲染, 打补丁到真实DOM
updated – 生命周期钩子函数被执行
当有data数据改变 – 重复这个循环

6.vue之销毁

当$destroy()被调用：比如组件DOM被移除(例v-if)
beforeDestroy：生命周期钩子函数被执行
拆卸数据监视器、子组件和事件侦听器
实例销毁后, 最后触发一个钩子函数
destroyed：生命周期钩子函数被执行

例：

<template>
<!--watch:数据发生变化，才会做事情-->
<!--  computed：数据发生变化，然后return一个结果-->
<!--  methods:用户触发事件，调用方法-->
  {{count}}
  <button @click="increment">+</button>
</template>

<script>

  export default {
    name: 'App',
    data() {
      return { count: 1}
    },
    created() {// `this` 指向 vm 实例
      console.log('组件被创建了')
    },
    mounted(){
      console.log('组件被挂载了')
    },
    updated(){
      console.log('组件被修改了')
    },
    unmounted() {
      console.log('组件被卸载')
    },
    methods:{
      increment(){
        this.count++
      }
    }


  }
</script>

标签：生命周期,函数,DOM,钩子,vue,讲解,data
来源： https://www.cnblogs.com/wmx1/p/16260113.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue生命周期讲解