当面试中问到Vue生命周期如何作答

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

&蚂蚁

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

阅读量473

点赞数

文章标签： vue.js vue

本文链接：https://blog.csdn.net/Luck_And_Destiny/article/details/120356020

版权

[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>