vue的生命周期:
在new vue()创建一个vue实例后,先初始化vue本身默认的生命周期和事件,此时vue的data和methods属性还没有初始化(beforeCreate),接着初始化data和methods属性(created),开始编译模板,判断当前vue对象是否设置el属性,是否设置template属性,最终在内存中生成一个编译好的模板字符串,编译号的模板只是存放在内存中,并没有挂载到页面中去,(beforeMount)将内存中模板字符串替换到浏览器的页面中去,(mounted,表示vue初始化完毕,下面进入运行阶段)可以看到运行阶段是一个循环,当数据改变时,会(beforeUpdate),根据最新的data属性,在内存中创建一个新的内存dom树,然后将最新的dom渲染到页面中去,这就完成了model->view的跟新,(updated),当vue的destroy被调用时,vue进入销毁阶段(beforeDestroy 在此方法中vue还处于可用状态),销毁 vue,同时移除所有的监听和回调,销毁所有的子component;
钩子函数
- beforeCreate():此时实例刚在内存中创建,还没有实例化data和methods属性
- created():实例创建完成,属性初始化完成,还没有编译模板
- beforeMount():模板已经编译,还没有挂载到页面
- mounted():已将编译好的模板挂载到页面中
- beoreUpdate():状态更新前调用的函数,此时data已经是最新值,但是页面还没重新渲染,还是旧值;
- update():状态更新后,页面重新渲染
- beforeDestroy():vue实例销毁前调用一次,此时vue还未销毁,任然可用
- destroy():vue实例被销毁,所有的监听会被移除,子实例会被销毁
mount是挂载的意思
模板编译是将vue的template编译成html