什么是生命周期？

生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

通俗说就是Vue实例从创建到销毁的过程，就是生命周期

什么是生命周期钩子函数都有哪些？分别是什么意思？

组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载，无法访问到数据和真实的dom，一般不做操作
挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
当更新完成后，执行updated（据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom）
经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等,组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

什么是钩子函数？

beforeCreate created[可以获取数据及方法]
beforeMount mounted[可以获取到真实的DOM]
beforeUpdate updated[数据更新执行]
beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]

图解

面试回答

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreated阶段，vue实例的挂载元素el还没有。在created阶段,vue实例的数据对象data有了,el还没有.
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

代码分析

<body><div id="app"><div>{{msg}}</div><ul><li v-for="a in arr"></li></ul><button @click="fn">点我一下</button></div><script src="../node_modules/axios/dist/axios.js"></script><script src="../node_modules/vue/dist/vue.js"></script><script>// 生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；// 生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；//生命周期的钩子函数中的this，会默认指向vue的实例// beforeCreate   created // beforeMount    mounted// beforeUpdate   updated// beforeDestroy  destroyed//    function Vue(options){//         let a = document.querySelector(options.el);//         for(let key in options.data){//             Object.defineProperty(options.data,key,{//                 get(){//                 },//                 set(){//                 }//             })//         }//    }//     new Vue({el:"#app",data:{}})let vm = new Vue({data: {msg: "hello",arr: [1, 2, 3, 4]},// 1. 在这个钩子函数执行之前初始化事件以及生命周期beforeCreate() {// 1. 在这个钩子函数中，不能获取data中的数据// console.log(this.msg);// 2. 这个函数不能操作DOM；// console.log(document.getElementsByTagName("li"))},// 给Vue的实例注入数据，进行数据监听created() {// 在created发送请求// 1. 可以获取到data中的数据// 2. 不能操作DOM的//console.log(this.msg);// console.log(document.getElementsByTagName("li"))axios.get("./carts.json").then(data => {// 异步的；this.arr = data.data;console.log(2);})},methods: {getData() {},fn() {this.msg = "world"}},// 执行之前，判断是否有el,template;编译beforeMount() {// console.log(document.getElementsByTagName("li"))},// 挂载完毕mounted() {// debugger// 挂载： 把VUE实例生成的虚拟的DOM转成真实的DOM，放在了页面中，这就是挂载；// 编译出的DOM把原有的DOM替换完毕；// 可以获取最终的DOM元素// let d = {type:"div",a:"1",chidlren:[{type:"span",children:[]}]}console.log(document.getElementsByTagName("li"));//console.log("mounted","初始化");},// 当数据更新时，会调用beforeUpdate 和updated钩子函数；上面四个不再运行beforeUpdate() {console.log("beforeUpdate", "更新之前");console.log(this.msg)// 更新数据之前执行},updated() {console.log("beforeUpdate", "更新之后");// 数据更新，虚拟的DOM更新，然后更新真实的DOM；最后触发这个函数},// 销毁之前beforeDestroy() {// 销毁之前// 清除定时器console.log("beforeDestroy");},// 销毁之后destroyed() {console.log("destroyed");// 销毁子组件，销毁观察者，事件监听者// 元素的事件还在，但是更改数据不会再让视图进行更新了；}}).$mount("#app");// vm.$destroy();// console.log(vm);// 在项目中，你遇到过什么问题，怎么解决的？// 准备</script>
</body></html>

Vue的DOM异步渲染

<body><div id="app"><ul><li v-for="a in arr">{{a}}</li></ul>{{sum}}</div><script src="../node_modules/axios/dist/axios.js"></script><script src="../node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({data:{arr:[1,2,3]},created(){// 此时并没有编译模板
// 如果在created改变数据，那么编译进行一次；如果在mounted中改数据，会再次编译模板；console.log(100);},beforeMount(){ console.log(200);
//this.arr=[1,2,3,4];// 开始编译模板编译原有数据编译3个li,存在内存中，
当数据更新时，立即将内存中的模板编译成4li;最后挂载到真实的DOM上；不会引发beforeUpdate函数的调用},computed:{sum(){// 在挂载的过程中,执行的这个函数console.log(1);return 100;}},// 编译模板// 在mounted之前改数据，不会调用beforeUpdate这个函数；// DOM 已经挂载完毕mounted(){console.log(300);this.arr=[1,2,3,4];
// 开始编译模板编译原有数据编译3个li,存在内存中，并且直接挂载到了真实DOM中，当数据更新时，
立即将内存中的模板编译成4li;再次把最新挂载到真实的DOM上；会引发beforeUpdate函数的调用
// VUE中DOM的更新是异步的；
// 如何在mounted中操作最新的DOM呢？
// $nextTick需要传入一个回调函数，会当真实的DOM再次更新完成，会立即调用这个回调函数；this.$nextTick(()=>{let oLis = document.getElementsByTagName("li")console.log(oLis.length);});},beforeUpdate(){console.log("beforeUpdate");}}).$mount("#app");</script>
</body>
</html>

生命周期（其他三个钩子函数）

component 和keep-alive【component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件】

闭合标签使用组件

1、component : 内置组件，根据is属性来显示对应的组件;is属性的属性值保持和组件名字一致；然后可以显示对应的组件

component: 每次能动态显示一个组件，当切换下一个组件时，当前组件要销毁
<component is=“second”>

keep-alive : keep: 保持 alive:活力

2、VUE项目的优化： keep-alive

keep-alive : keep: 保持 alive:活力
<keep-alive>
keep-alive:用于缓存组件，如果该组件还会再启用，那么可以使用keep-alive进行组件缓存和优化，提高性能，缓存的组件不需要销毁，也不需要再创建
<component v-bind:is=“one”> //如果是动态属性，那么会去data中取值
</keep-alive>

三个钩子函数详解

当keep-alive 缓存组件才会有的生命周期的钩子函数
activated deactivated
errorCaptured 当子孙组件出错时，会调用这个钩子函数

// keep-alive 缓存组件 生命周期的钩子函数 activated deactivated
// 生命周期的钩子函数
activated() {
// 当缓存组件有被显示出来时，会触发这个钩子函数
console.log(100);
},
deactivated() {
// 当缓存的组件隐藏时，会触发这个钩子函数；
console.log(200);
},
// 当子孙组件出错时，会调用这个钩子函数
errorCaptured(a, b, c) {
// 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
console.log(a);
console.log(b);
console.log©;
console.log(“子组件报错”)
},

代码段

<body><div id="app"><button @click="fn">点一点</button><!-- // component : 内置组件，根据is属性来显示对应的组件;is属性的属性值保持和组件名字一致；然后可以显示对应的组件// 如果是动态属性，那么会去data中取值 --><!-- <component is="second"></component> --><keep-alive><!-- keep-alive:用于缓存组件，如果该组件还会再启用，那么可以使用keep-alive进行组件缓存和优化，提高性能，缓存的组件不需要销毁，
也不需要再创建 --><component v-bind:is="one"></component></keep-alive></div><script src="../node_modules/vue/dist/vue.js"></script><script>// component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件；// 闭合标签使用组件// component: 每次能动态显示一个组件，当切换下一个组件时，当前组件要销毁// keep-alive : keep: 保持  alive:活力 // VUE项目的优化： keep-alivelet kkk = {data() {return {a: 'cc'}},template: "<div>{{a}}</div>"}let first = {destroyed() {console.log("销毁")},components: {kkk},// keep-alive 缓存组件 生命周期的钩子函数  activated  deactivated// 生命周期的钩子函数activated() {// 当缓存组件有被显示出来时，会触发这个钩子函数console.log(100);},deactivated() {// 当缓存的组件隐藏时，会触发这个钩子函数；console.log(200);},// 当子孙组件出错时，会调用这个钩子函数errorCaptured(a, b, c) {// 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、
发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。console.log(a);console.log(b);console.log(c);console.log("子组件报错")},template: "<div>我是老大<kkk></kkk></div>"};let second = {template: "<div>我是老二</div>"}let third = {template: "<div>我是老三</div>"}let vm = new Vue({el: "#app",data: {one: "first"},methods: {fn() {let ary = ["first", "second", "third"];let index = ary.indexOf(this.one);if (index < 2) {this.one = ary[index + 1];} else {this.one = ary[0];}// // switch (this.one) {//     case "first"://         this.one = "second"//         break;//     case "second"://         this.one = "third"//         break;//     default://         this.one = "first"//         break;// }}},components: {first,second,third},});</script>
</body>

本文参考文章：宅男呀的Vue生命周期（11个钩子函数）

史上最全的Vue生命周期钩子函数11个相关推荐

vue生命周期钩子函数的正确使用方式
对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...
Vue生命周期钩子函数的使用以及应用场景
文章目录前言钩子函数介绍 beforeCreate(创建前) created(创建后) beforeMounted(挂载前) mounted(挂载后) beforeUpdate(更新前) upda ...
Vue生命周期钩子函数理解与使用场景
Vue生命周期钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫 ...
vue生命周期钩子函数
vue实例的生命周期:从创建到销毁的整个过程 1.钩子函数 vue框架内置函数,随着组件的生命周期阶段,自动执行使用钩子函数可以知道vue生命周期到达了什么阶段作用:在特定的时间点执行特定的操作 ...
说一下vue生命周期钩子函数有哪些，分别什么时候触发
vue生命周期即为一个组件从出生到死亡的一个完整周期,主要包括以下4个阶段:创建,挂载,更新,销毁创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂 ...
Vue08/Vue 生命周期钩子函数( Vue生命周期11个阶段 )应用场景
Vue生命周期 Vue生命周期介绍 Vue生命周期是指Vue实列对象从创建之初到销毁的过程一. Vue生命周期11个阶段创建 beforeCreate //数据初始化前 created ...
vue生命周期钩子函数（11个）
首先来一波官网的对于vue生命周期的图解. 这一张图对于vue的生命周期已经讲解的特别详细了,但是光靠这一张图还不足于了解它的生命周期,我们需要实践一下,介绍一下vue的钩子函数. 一. 组件创建前后 ...
vue生命周期钩子函数为什么不能使用箭头函数
来自vue官方文档的解释: 所有生命周期钩子的 this 上下文将自动绑定至实例中,因此你可以访问 data.computed 和 methods.这意味着你不应该使用箭头函数来定义一个生命周期方法 ...
vue生命周期钩子函数有哪些
每个vue实例从创建到销毁的过程就是vue的一个生命周期,每个阶段都有对应的钩子函数,当我们想在vue的不同时期操作vue实例是,就可以在不同的钩子函数中进行 vue有8种生命周期函数: before ...

史上最全的Vue生命周期钩子函数11个

什么是生命周期？

什么是生命周期钩子函数都有哪些？分别是什么意思？

什么是钩子函数？

图解

面试回答

代码分析

Vue的DOM异步渲染

生命周期（其他三个钩子函数）

三个钩子函数详解

代码段

史上最全的Vue生命周期钩子函数11个相关推荐

最新文章

热门文章