盐城网站建设小程序公司/百度网页版主页网址
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.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.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); //undefinedconsole.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); //undefinedconsole.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了，哦忘了，只是快搞到了，希望越大失望…,我呸，你个乌鸦嘴，滚犊子去吧。