Vue生命周期钩子的理解

组件从创建到销毁的一系列过程叫做组件的声明周期。

vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发）。

组件的生命周期钩子函数大致可以分为三个阶段：初始化、进行中、销毁。

1、初始化：beforecreate – create – beforeMount - mounted

     // 一个组件或者实例的生命周期都是通过new开始的// 实例化之后，内部会做一些初始化事件与生命周期相关的配置Vue.component("my-component",{template:"#my-component",data(){return {msg:1}},// 这个钩子函数初始化的时候立马执行,此钩子函数里面是获取不到数据的// 同时页面中的真实dom节点也没有挂载出来，nullbeforeCreate(){console.log("beforeCreate....")console.log(this.msg,document.getElementById("title")) // undefined null},// created钩子函数内部的数据已经被挂载了，但是真实dom节点还是没有渲染出来// 在这个钩子函数里面，如果同步的去更改数据的话，运行中钩子函数是不会执行的。// 通常会在此钩子函数里面进入ajax的异步操作，另外还可以做一些初始化事件的绑定created(){console.log("created...")console.log(this.msg,document.getElementById("title")) // undefined null},// 接下来的过程，就是组件或者实例去查找各自的模板，让后将其编译成虚拟dom，即将放入render函数中做初始化渲染的操作。// beforeMount代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来// 此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作beforeMount(){console.log("beforeMount....")console.log(this.msg,document.getElementById("title")) // 1 null},// 生成好了虚拟dom，然后在render函数里面替换对应的el，渲染成真实dom节点// 相当于在render函数里面做了一个初始化渲染的操作// 相当于把组件内部的render函数覆盖了。自己的render是将虚拟dom渲染成真实dom的操作render(){ // 内部执行不需要写这一步console.log("render.....")},// mounted钩子函数是初始化阶段的最后一个钩子函数// 数据已经挂载完毕了，真实的dom也已经渲染出来了// 这个钩子函数可以用来做一些实例化的相关操作 ===> 拖拽mounted(){console.log("mounted.....")console.log(this.msg,document.getElementById("title")) // 1 dom真实节点},})// 绑定摸板组件new Vue({}).$mount("#app");

2、进行中阶段：beforeUpdate - updated

     // 一个组件或者实例的生命周期都是通过new开始的// 实例化之后，内部会做一些初始化事件与生命周期相关的配置Vue.component("my-component",{template:"#my-component",data(){return {msg:1}},// 运行时钩子函数初始化阶段是不会主动执行的// 只有dom挂载完毕了，然后再去当数据发生变化的时候，beforeUpdate这个钩子函数才会执行beforeUpdate(){console.log("beforeUpdate....")},// 这个钩子函数是可行的// 当数据发生改变的时候，引发虚拟dom的对比，虚拟dom对比完成后，再去渲染真实的dom结构// 当真实的dom结构渲染完成后，内部才会执行updated钩子函数// 数据改变了，然后swiper-slide这几个真实dom生成好了之后，才会进入到updated这个钩子函数里面去updated(){new Swiper(".swiper-container",{loop:true })},})// 绑定摸板组件new Vue({}).$mount("#app");

3、销毁：beforeDestroy - destroyed

     // 一个组件或者实例的生命周期都是通过new开始的// 实例化之后，内部会做一些初始化事件与生命周期相关的配置Vue.component("my-component",{template:"#my-component",data(){return {msg:1}},// 当组件销毁时，就会触发，vm.$destroy()的时候，组件就会被销毁// 这个钩子函数代表销毁之前，可以做一些善后操作// 例如可以做一些清除事件绑定，清除计时器绑定beforeDestroy(){clearInterval(this.timer) // 清除计时器console.log("beforeDestroy...")},// 组件一旦被销毁了，组件的dom结构还是存在的// 只是组件的双向绑定destroyed(){console.log("destroyed...")}})// 绑定摸板组件new Vue({}).$mount("#app");

注意：生命周期函数内不能使用箭头函数。

Vue生命周期钩子的理解相关推荐

Vue生命周期钩子函数理解与使用场景
Vue生命周期钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫 ...
对Vue生命周期钩子的理解
beforeCreate:是 new Vue() 之后触发的第一个钩子,在当前阶段 data.methods.computed 以及 watch 上的数据和方法都不能被访问. created:在实例创 ...
Vue生命周期钩子理解
#Vue生命周期钩子理解 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset= ...
vue生命周期钩子函数的正确使用方式
对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...
Vue 生命周期钩子解读
文章目录 vue 生命周期钩子声明周期图示解析生命周期钩子函数 beforeCreate #created #beforeMount #mounted #beforeUpdate #updated ...
-Vue生命周期钩子
1.1-Vue生命周期钩子介绍 vue生命周期钩子官方文档: 官方文档图解介绍:生命周期图示官方文档详细介绍:vue生命周期钩子介绍 ==vue生命周期钩子介绍 : vue从创建到销毁过程中,会执行 ...
Vue生命周期钩子函数的使用以及应用场景
文章目录前言钩子函数介绍 beforeCreate(创建前) created(创建后) beforeMounted(挂载前) mounted(挂载后) beforeUpdate(更新前) upda ...
前端面试 vue生命周期钩子是如何实现的？理解vue中模板编译原理？
生命周期钩子在内部会被vue维护成一个数组(vue 内部有一个方法mergeOption)和全局的生命周期合并最终转换成数组,当执行到具体流程时会执行钩子(发布订阅模式),callHook来实现调用. ...
vue 生命周期_深入理解Vue实例生命周期
‍vue实例生命周期与生命周期钩子‍ 每个 Vue 实例在被创建时都会经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 为了让开发者在 ...

Vue生命周期钩子的理解

Vue生命周期钩子的理解相关推荐

最新文章

热门文章