在初步使用Vue框架时,我们需要了解双向绑定操作中的生命周期
1. 什么是生命周期?
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称为Vue的生命周期。
通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。
分为四个阶段
创造期、挂载期、更新期、销毁期
每个阶段又分为前期和后期。
beforeCreate(创造前)
官方描述:组件实例刚被创建,组件属性data、el等还未生效。
el 和 data 并未初始化
注意:this变量还不能使用,在data下的数据,和methods下的方法都不能获得到;
控制台显示此时还未被定义到数据中
created(创造后)
官方描述:实例已经创建完成之后被调用,然而,挂载阶段还没开始,$el 属性目前不可见。
data已经初始化,但el并未初始化
完成了 data 数据的初始化,但el没有初始化,所以这个时候可以操作vue实例中的数据和各种方法,但是还不能对"dom"节点进行操作;
创建的标志点是New vue(),beforeCreate和created都发生在创建动作之后,但区别在于beforeCreate触发的时候数据还没初始化和绑定,而created的时候就生成好了,具体看看console的内容。
数据很明显,beforeCreate触发的时el、data都没初始化,但到created的时候虽然el依然没有初始化,但是data已经生成了,并且成功将message的值绑定上。
————————————————
beforeMount(挂载前)
官方描述:在挂载开始之前被调用,完成了 el 和 data 初始化。
el 和 data 均已初始化 。
在标红处,我们能发现el还是 {{message}},这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
在实例化Vue的时候,两种方式挂载数据
文档中最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素
第二种方法:$mount
利用mount挂载的方法有一个很大的好处,就是将实例化的内容和对应HTML的关联分开,可以更直观的展现。
mounted(挂载后)
官方描述:模板挂载完毕,el 被新创建的 vm.$el 替换。
解释:挂载完毕,这时dom节点被渲染到文档内,一些需要dom的操作在此时才能正常进行。
beforeMount和mounted两者主要区别在于模板是否编译和挂载了
①el是用来告诉实例在那个元素上进行挂载。
②beforeMount触发的时候el已经初始化了,但是只是占了坑,挂上了编译前的模板,即虚拟DOM技术(Virtual DOM)
此时,beforeMount的虚拟DOM便被真正数据渲染了出来。
————————————————
beforeUpdate(数据更新前)
————————————————
beforeDestroy(销毁前)
Destroyed(销毁后)
小结
Vue 组件的生命周期分为四个阶段,每个阶段有两个生命钩子,注意前后钩子。
(1)创建阶段:主要用于组件创建时,获取数据设置组件。
beforeCreate组件实例刚被创建,组件属性data、el等还未生成
created(能够访问创建成功的组件实例,但不能访问 模板,el 或 DOM)
(2)挂载阶段:主要用于访问组件 DOM
beforeMount在挂载开始之前被调用,完成了 el 和 data 初始化
mounted(能够访问组件模板,模板挂载完毕,el 被新创建的 vm.$el 替换)
(3)更新阶段:数据变化,组件重新渲染。
beforeUpdate(能够访问组件更新后的数据,但无法访问 DOM)
updated(能够访问 DOM)
(4)销毁阶段:(用于销毁组件,做清理工作)
beforeDestroy(销毁前还能访问组件实例)
destroyed销毁完毕,销毁实例,清理实例连接,解绑它的全部指令及事件监听器,并不会清除data的数据或者清除dom
【完】