2020-2021【前端VUE框架】vue生命周期与组件生命周期！

在这里插入图片描述
大家好，很高兴去 京东超市 面试前端，然后回来的路上，想了很久还是给大家总结一下，京东的感受：公司大气，场地布局的很美，很想能够来这里上班，不知道二面，三面会怎么样，不管了，还是要好好的复习，准备新的挑战，哈哈，今天的面试官主要是问了我前端使用vue的感想，以及在项目中怎么使用vue,包括商品分类，商品属性怎么使用组件去传递数据（父子互传），微信支付怎么在页面去实现的，怎么控制购物城和票据的对应关系，物流地址链路的分析，等等比较复杂的业务逻辑的实现，我都一一给他解答，还算满意，叫我过一天后再来二面，哦，我的天，奥里给，面完了很是激动哈哈，马上下楼给自己来杯***89年菊花奶茶，抱抱菊***。让自己更加通畅，爽歪歪，哈哈，不好意思我讲粗话，大家见谅哈！

好了不扯犊子了，言归正传哈，我们来谈谈vue生命周期。

vue生命周期是指vue实例对象从创建之初到销毁的过程。

vue的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后

vue生命周期的作用：生命周期中有多个钩子，可以让我们在控制整个vue实例时更容易形成好的逻辑

● 1、创建前/后：

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

（实例被创建之前的函数）阶段，vue实例挂载元素el和数据对象data都是undefined，还未初始化。

created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见

（当实例被创建完成之后的函数，可以对数据做一些计算，不过这里设置的数据没有setter/getter属性），vue实例的数据对象data被初始化，但是el还没有被初始化。

● 2、载入前/后：

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用

vue实例挂载元素el和数据对象data都初始化了，但还是挂载之前虚拟的DOM节点，data.message还未替换。

mounted：el 被新创建的 vm. $e l 替换，并挂载到实例上去之后调用该钩子。如果 r o o t 实例挂载了一个文档内元素，当 m o u n t e d 被调用时 v m .$ el 也在文档内。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

（这个函数在Vue生命周期只会执行一次，页面有数据变化会通过update()更新），vue实例挂载完成，data.message成功渲染。

vm.$mount(’#id’)作用------手动地挂载一个未挂载的实例

● 3、更新前/后：

beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器

实时监听data的变化，当data变化时，触发beforeUpdate和updated方法,会重新渲染VDom，然后在对应位置的真实的DOM打补丁

update：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated

updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated

● 4、activated：keep-alive 组件激活时调用

 deactivated：keep-alive 组件停用时调用

● 5、销毁前/后：

beforeDestroy：实例销毁之前调用

destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

在生命周期钩子函数中父子执行顺序：

beforeMount–执行顺序是先父后子

mounted–执行顺序是先子后父

beforeDestroy–执行顺序是先父后子

destroyed—执行顺序是先子后父

下面的源码大家复习吧，谢谢

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>

<body>
  <div id="app">
    <h1>{{message}}</h1>
    <button @click="update">更新数据</button>
    <button @click="destroy">销毁组件</button>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    methods: {
      update() {
        this.message = '我改变了数据'
      },
      destroy() {
        this.$destroy(); //组件被销毁以后， 再次对组件进行任何操作都 不起作用了
        // vm.$destroy();
      }
    },
    beforeCreate: function () {
      console.group('------beforeCreate 创建前状态:组件实例刚刚创建，还未进行数据观测和事件配置------');
      console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
      console.log("%c%s", "color:red", "message: " + this.message) //undefined

    },
    created: function () {
      console.group('------created 创建完毕状态:实例已经创建完成，并且已经进行数据观测和事件配置------');
      console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化

    },
    beforeMount: function () {
      console.group('------beforeMount挂载前状态:模板编译之前，还没挂载------');
      console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
      console.log(this.$el); //模板没有渲染
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 

    },
    mounted: function () {
      console.group('------mounted 挂载结束状态:模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示------');
      console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
      console.log(this.$el); //模板已经渲染
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 

    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态:组件更新之前===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el); //还是原来的数据，新数据还没渲染
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);

    },
    updated: function () {
      console.group('updated 更新完成状态:组件更新之后===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el); //新数据已经渲染完成
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态 :组件销毁之前===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);

    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态:组件销毁之后===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message)
    }，
    activated() {
      console.log('我这个页面显示就会执行');
    },
    deactivated: function () {
      console.log('我这个页面退出的会执行');
    },
  })
</script>

</html>

学习目标：

提示：2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习
重磅来袭：3个月掌握 vue 入门知识到实战学代码。

学习内容：

学习本节视频需要掌握的知识点：
1.HTML
2.CSS
3.JavaScript
那么关于上面三个知识点，视频学习地方在：html5+css3+js+jquery课程
扫码关注我哈，我们一起抱菊：
在这里插入图片描述
顺便我平时找的一个vue视频，全课程56节免费的视频，是不是爽歪歪,然我小妮子传授你五百年宫斗的魔力：vue进阶视频，全课程56节免费学习
，哈哈，不知道你的吸收能力怎么样，反正我是快搞到进洞（京东）offer了，哦忘了，只是快搞到了，希望越大失望…,我呸，你个乌鸦嘴，滚犊子去吧。