对vue生命周期的理解
什么叫生命周期?组件从创建到销毁的一系列过程叫做组件的生命周期vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑,并且这些函数会在一些特定的场合下去执行.组件的生命周期钩子函数大致可以分为三个阶段:初始化、运行中、销毁初始化阶段:beforeCreatcreated beforeMount mounted运行中阶段:beforeUpdate updated...
·
-
什么叫生命周期?
组件从创建到销毁的一系列过程叫做组件的生命周期
-
vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑,并且这些函数会在一些特定的场合下去执行.
-
组件的生命周期钩子函数大致可以分为三个阶段:初始化、运行中、销毁
初始化阶段:beforeCreat created beforeMount mounted
运行中阶段:beforeUpdate updated
销毁阶段:beforeDestroy destroyed
-
接下来创建一个简单的实例,在不同的生命周期下观察dom渲染和挂载情况
代码示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <my-component></my-component> </div> <template id="my-component"> <div> <h1 id="title">hello-------{{msg}}</h1> <p><input type="text" v-model="msg"></p> </div> </template> <script src="./base/vue.js"></script> <script> // 初始化阶段 // 一个组件或者实例的生命周期都是通过new开始的 // 实例化之后,内部会做一些初始化事件与生命周期相关的配置 Vue.component('my-component', { template: '#my-component', data() { return { msg: 1 } }, // beforeCreate这个钩子函数初始化的时候立马执行,此钩子函数里面是获取不到数据的 // 同时页面中的真实dom节点也没有挂载出来, null beforeCreate(){ console.log('beforeCreate......') console.log(this.msg,document.getElementById('title')) // undefined null }, // created钩子函数内部的数据已经被挂载了,但是真实dom节点还是没有渲染出来 created(){ // this.msg = 2222 console.log('created......') console.log(this.msg,document.getElementById('title')) // 1 null }, // beforeMount代表dom马上就要被渲染出来了,但是还没有真正的在页面中渲染出来,显示为 null beforeMount(){ console.log('beforeMount......') console.log(this.msg,document.getElementById('title')) // 1 null }, // mounted钩子函数使初始化阶段的最后一个钩子函数 // 数据已经挂载完毕了,真实的dom也已经渲染出来了 mounted(){ console.log('mounted......') console.log(this.msg,document.getElementById('title')) // 1 <h1 id='title'>hello-------1</h1> }, // 运行时钩子函数初始化阶段是不会主动执行的 // 只有dom挂载完毕了,然后再去当数据发生变化的时候,beforeUpdate这个钩子函数才会执行 beforeUpdate(){ console.log('beforeUpdate.....') console.log(this.msg,document.getElementById('title')) // 新值 <h1 id='title'>hello-------新值</h1> }, updated(){ console.log('updated.....') console.log(this.msg,document.getElementById('title')) // 新值 <h1 id='title'>hello-------新值</h1> }, // beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。 beforeDestroy(){ console.log('beforeDestroy.....') console.log(this.msg,document.getElementById('title')) }, // destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 destroyed(){ console.log('destroyed.....') console.log(this.msg,document.getElementById('title')) } }) new Vue({ el: '#app' }) </script> </body> </html>
更多推荐
已为社区贡献1条内容
所有评论(0)