Vue生命周期详解

Vue生命周期详解_第1张图片

Vue生命周期详解:

一. Vue生命周期介绍

生命周期的含义: 从Vue实例创建,运行,到销毁期间,总是伴随着各种各样的事件,这些时间统称为生命周期

常见叫法: 生命周期钩子 == 生命周期函数 == 生命周期事件

1.1 创建阶段
  • beforeCreate:实例刚在内存中创建出来,还没有初始化 data和 methods,只包含一些自带额生命周期函数
  • created: 实例已经在内存中创建完成,此时data和methods已经创建完成
  • beforeMount: 此时已经完成了模版的编译,只是还没有渲染到界面中去
  • mounted: 模版已经渲染到了浏览器,创建阶段结束,即将进入运行阶段

创建阶段生命周期Demo:

  • 我们可以通过在代码中添加 debugger 关键字来达到断点调试的功能,每一个debugger就相当于一个断点
  • 添加断点调试后,我们可以查看每一个生命周期阶段的数据变化以及查看浏览器渲染时间
  • 可以通过断点调试调用栈的调用过程,来学习Vue源码:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue-Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <p>{
   {
   message}}</p>
    </div>
    <script type="text/javascript">
        var v &#

你可能感兴趣的:(面试,面试可能碰到,结构清晰,vue.js,vue)