Vue生命周期钩子函数全解析(1)

八个钩子函数详解

===================================================================

先创建实例,组件,渲染在页面

hello---------{{msg}}

• 运行

然后分别调用钩子函数,了解其特性及作用

beforeCreat

• 函数初始化的时候立马执行

• 钩子函数获取不到数据 this.msg为undefined

• 真实dom节点也没有渲染出来

Vue.component(“my-component”, {

template: “#my-component”,

data() {

return {

msg: “1”

}

},

//函数初始化的时候立马执行

//钩子函数获取不到数据 this.msg为undefined

//真实dom节点也没有渲染出来

beforeCreate() {

console.log(“beforeCrate钩子函数…”)

console.log(this.msg) //undefined

console.log(document.getElementById(“title”)) //null

}

})

• 运行

creat

• 函数内部的数据已经被挂载

• 可以得到数据 this.msg 为 1

• 在这个钩子函数里去进行数据更改,更新的钩子函数beforeUpdate,updated是不会执行的,只有当真实dom渲染出来之后,数据改变,才会被执行

• 通常会在此钩子函数里面进入ajax的异步操作，另外还可以做一些初始化事件的绑定

Vue.component(“my-component”, {

template: “#my-component”,

data() {

return {

msg: “1”

}

},

//函数内部的数据已经被挂载

//可以得到数据 this.msg 为 1

//在这个钩子函数里去进行数据更改,更新的钩子函数beforeUpdate,update是不会执行的,只有当真实dom渲染出来之后,数据改变,才会被执行

//通常会在此钩子函数里面进入ajax的异步操作，另外还可以做一些初始化事件的绑定

created(){

console.log(“created钩子函数…”)

this.msg=2

console.log(this.msg) //2 更改之后的msg数据

console.log(document.getElementById(“title”)) //null

},

beforeUpdate(){

//不被执行

console.log(“beforeUpdate钩子函数…”)

},

updated(){

//不被执行

console.log(“update钩子函数…”)

},

})

• 运行

beforeMount

• 渲染dom之前就是组件或者实例去查找各自的模板，让后将其编译成虚拟dom，即将放入render函数中做初始化渲染的操作。

• beforeMount代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来

• 在这个钩子函数里去进行数据更改,更新的钩子函数beforeUpdate,updated是不会执行的,只有当真实dom渲染出来之后,数据改变,才会被执行

• 此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作

Vue.component(“my-component”, {

template: “#my-component”,

data() {

return {

msg: “1”

}

},

//渲染dom之前就是组件或者实例去查找各自的模板，让后将其编译成虚拟dom，即将放入render函数中做初始化渲染的操作。

//beforeMount代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来

//在这个钩子函数里去进行数据更改,更新的钩子函数beforeUpdate,update是不会执行的,只有当真实dom渲染出来之后,数据改变,才会被执行

//此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作

beforeMount(){

console.log(“beforeMount钩子函数…”)

console.log(this.msg) //1

console.log(document.getElementById(“title”))//null

},

beforeUpdate(){

//不被执行

console.log(“beforeUpdate钩子函数…”)

},

updated(){

//不被执行

console.log(“update钩子函数…”)

}

})

• 运行

mounted

• mounted钩子函数是真实dom渲染之后

• 数据已经挂载完毕了，真实的dom也已经渲染出来了

• 可以进行数据的更改,并且beforeUpdate,updated执行,因为真实dom已经渲染出来了

• 这个钩子函数可以用来做一些实例化的相关操作

Vue.component(“my-component”, {

template: “#my-component”,

data() {

return {

msg: “1”

}

},

//mounted钩子函数是真实dom渲染之后

//数据已经挂载完毕了，真实的dom也已经渲染出来了

//可以进行数据的更改,并且beforeUpdate,updated执行,因为真实dom已经渲染出来了

//这个钩子函数可以用来做一些实例化的相关操作

mounted(){

console.log(“mounted钩子函数…”)

this.msg=2

console.log(this.msg) //2

console.log(document.getElementById(“title”))

//

hello 数据msg===>{{msg}}

},

beforeUpdate(){

//执行

console.log(“beforeUpdate钩子函数…”)

},

updated(){

//执行

console.log(“update钩子函数…”)

}

})

• 运行

beforeUpdate和 update

• beforeUpdate

• 运行时钩子函数初始化阶段是不会主动执行的

• 只有内存中的虚拟dom渲染为真实dom，然后再数据发生变化的时候，beforeUpdate这个钩子函数才会执行

• beforeUpdate钩子函数里,在这里获取dom里面的数据,是更新之前的数据

• update

• 这个钩子函数里面dom获取的数据内容是更新后的内容

• 生成新的虚拟dom,与上一次的虚拟dom结构进行对比,比较出来差异(diff算法),再去进行真实dom的重新渲染

• updated钩子函数里,在这里获取dom里面的数据跟你在内存里面的data数据趋于一致,就是更新之后的数据

Vue.component(“my-component”, {

template: “#my-component”,

data() {

return {

msg: “1”

}

},

//运行时钩子函数初始化阶段是不会主动执行的

//只有内存中的虚拟dom渲染为真实dom，然后再数据发生变化的时候，beforeUpdate这个钩子函数才会执行

//beforeUpdate钩子函数里,在这里获取dom里面的数据,是更新之前的数据

beforeUpdate(){

console.log(“beforeUpdate中的this.msg”,this.msg)

console.log(“beforeUpdate钩子函数…”,document.getElementById(“title”).innerHTML)

},

//这个钩子函数里面dom获取的数据内容是更新后的内容

//生成新的虚拟dom,与上一次的虚拟dom结构进行对比,比较出来差异(diff算法),再去进行真实dom的重新渲染

//updated钩子函数里,在这里获取dom里面的数据跟你在内存里面的data数据趋于一致,就是更新之后的数据

updated(){

console.log(“updatad中的this.msg”,this.msg)

console.log(“updated钩子函数…”,document.getElementById(“title”).innerHTML)

}

})

• 运行,通过输入框将数据从1变为12

beforeDestroy 和 destroyed

beforeDestroy

• 当组件销毁的时候,就会触发, vm.$destory()

• beforeDestroy钩子函数表示销毁之前,我们可以进行一些善后操作

• 例如:清除一些事件绑定,清除定时器的相关操作

destroyed

• 组件一旦被销毁了,组件的dom结构还是存在的

• 只是组件的双向数据绑定,事件监听,watch相关的已经被移除掉了

brforeDestroy的应用

• 要对这两个钩子函数进行了解,得先进行销毁操作,因此,我们可以添加一个按钮,当点击之后,销毁实例

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。