当面试中问到Vue生命周期如何作答.(附Vue生命周期笔记)

最新推荐文章于 2024-01-22 15:50:42 发布

HolaWord

最新推荐文章于 2024-01-22 15:50:42 发布

阅读量887

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/azhou820567753/article/details/100058636

版权

Vue 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

本文详细探讨了Vue实例的生命周期，从创建到销毁的各个阶段，包括生命周期钩子函数的作用。通过理解beforeCreated、created、beforeMounted、Mounted、beforeUpdate、Updated、beforeDestroy和destroyed等关键方法，可以更好地掌握何时插入自定义业务代码。同时，文章提供了一张Vue官方的生命周期图表以辅助理解。

摘要由CSDN通过智能技术生成

[1.什么是Vue生命周期]
Vue实例从创建到销毁的过程，就是生命周期
[2.什么是钩子函数]
Vue实例从创建到销毁的过程中也会运行一些叫做生命周期钩子的函数，
这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码。
[3.生命周期的理解]
每个 Vue 实例在被创建时都要经过一系列的初始化过程。
例如：从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。
而每个阶段会触发不同的方法
例如:
开始创建,初始化数据过程,先后触发beforeCreated,created方法
编译模板,挂载Dom过程,先后触发breforeMounted,Mounted方法
数据变化时更新DOM过程,先后触发beforeUpdate,Update方法
卸载过程,先后触发beforeDestory,destory方法


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <button @click='update'>更新</button>
    <button @click='destroy'>销毁</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      Vue实例的生命周期
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '生命周期'
      },
      methods: {
        update: function(){
          this.msg = 'hello';
        },
        destroy: function(){
          this.$destroy();
        }
      },
      beforeCreate: function(){
        //vue实例刚被创建出来,此时还没有初始化好data和methods属性
        console.log('beforeCreate');
      },
      created: function(){
        //实例的data与methods已经初始化,此时还没有开始编译模板
        console.log('created');
      },
      beforeMount: function(){
        //已经完成了模板的编译,但是还没有挂载到页面中(准备用编译好的模板替换el属性指向的DOM对象中的内容)
        console.log('beforeMount');
      },
      mounted: function(){
        //已经将模板编译好,挂载到了指定的容器后触发的函数,并且实时监听data变化随时准备更新DOM
        console.log('mounted');
      },
      beforeUpdate: function(){
        //主要data中的数据发生了变化就会执行这个函数
        //执行beforeUpdate时候,data的数据已经是最新的了,但是是还没有更新到界面上的数据
        console.log('beforeUpdate');
      },
      updated: function(){
        //主要data中的数据发生了变化就会执行这个函数
        //执行updated的时候,data的数据已经是最新的了,界面上的数据也已经更新
        console.log('updated');
      },
      beforeDestroy: function(){
        //执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
        //最后能使用Vue实例的地址
        console.log('beforeDestroy');
      },
      destroyed: function(){
        //执行destyoyed的时候,表示Vue实例已经完全销毁,实例中的任何内容都不能再使用了
        console.log('destroyed');
      }
    });
  </script>
</body>
</html>

下面附上一张Vue官网提供的Vue实例生命周期图在这里插入图片描述

HolaWord

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
当面试中问到Vue生命周期如何作答.(附Vue生命周期笔记)

[1.什么是Vue生命周期]Vue实例从创建到销毁的过程，就是生命周期[2.什么是钩子函数]Vue实例从创建到销毁的过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码。[3.生命周期的理解]每个 Vue 实例在被创建时都要经过一系列的初始化过程。例如：从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、...
复制链接

扫一扫

专栏目录